CSS で first-child かつ last-child の要素を表現する方法

まず CSS の書き方のルールとして A かつ B の条件を満たす記述方法があります。

<!-- クラスが a かつ b の要素 -->
<div class="a b">...</div>

/* クラスが a かつ b の要素 */
.a.b {...}

.a.b のようにスペースを開けずにクラス名をくっつけると、クラスが a かつ b の AND 条件を表現できます。この仕組を利用すれば first-child かつ last-child も表現できます。

first-child かつ last-child を表現する

プログラムサンプル

最初の子要素かつ最後の子要素となるリスト要素 li タグに CSS を反映させるのを例にしたプログラムをご覧ください。

<!-- testlist クラス直下の first-child かつ last-child -->
<ul class="testlist">
  <li>...</li>
</ul>

:first-child:last-child とスペースなしでくっつけることで、それぞれの AND 条件であることを表します。

/* first-child かつ last-child のリスト要素*/
.testlist li:first-child:last-child {...}

しかしこれは言葉の通り AND 条件を適用させただけで、スマートな CSS の記述方法ではありません。

正解は only-child を使用する

「最初の子要素かつ最後の子要素」とは「子要素が１つしかない」状態を表してます。この場合わざわざ first-child と last-child を AND 条件で結ばなくても、子要素が１つだけの条件を表す only-child を利用すれば CSS コードはシンプルになります。

/* first-child かつ last-child のリスト要素*/
.testlist li:only-child {...}

first-child かつ last-child は only-child で表現できる。

これを機に覚えておきましょう！