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

公開日:
CSS の first-child かつ last-child を表現する方法

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

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

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

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

プログラムサンプル

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

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

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

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

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

正解は only-child を使用する

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

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

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

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

この記事をシェアする

最新情報は Twitter、Facebook、Freedly にてお届け!

NJ-CLUCKER RSS

このブログの運営者

NJ

元システムエンジニアから、個人事業主として独立。Web サイト運営、動画制作など活動の場を広げています。このブログでは、困ってたどり着いた人に、分かりやすく答えを提供できるように心掛けています。

更新情報は、Twitter や Facebook ページを参照ください。フォローお待ちしています。