CSS only-child

第一次碰到使用它的情況。

簡述

在幫 highlight.js 設定 line-number 的樣式時，碰到了一個問題。

首先程式碼區塊的 HTML 大概長這樣：

<tabel>
  <tbody>
    <tr>第 1 行程式碼</tr>
    <tr>第 2 行程式碼</tr>
    <tr>第 3 行程式碼</tr>
  </tbody>
</tabel>

為了讓上下方有一點 padding，我做了這樣的 CSS 設定：

/* 第一行的 number 上方加 padding */
.hljs-ln tr:first-child .hljs-ln-numbers {
  padding-top: 0.8em !important;
}
/* 最後一行的 number 下方加 padding */
.hljs-ln tr:last-child .hljs-ln-numbers {
  padding-bottom: 0.8em !important;
}
/* 為了讓第一跟最後一行 code 對齊，設定 vertical-align  */
.hljs-ln tr:first-child .hljs-ln-code {
  vertical-align: bottom;
}
.hljs-ln tr:last-child .hljs-ln-code {
  vertical-align: top;
}

出來的結果如下：

但是當只有一行程式碼的時候會有問題：

因為只有一行的時候會同時符合 :first-child 跟 :last-child，這時候就會套用在後面的那個，所以是 vertical-align: top。

這時候該怎麼處理？就用 only-child 來解決！只要加上這一行就完美搞定：

.hljs-ln tr:only-child .hljs-ln-code{
  vertical-align: middle;
}

簡單來說，only-child 會選到沒有兄弟元素的元素。上面的 tr 正好就符合這個條件，所以才能選到。