【CSS】子要素がひとつだけの時に反映させる指定方法

RELEASE / 2024.7.5 UPDATE / 2024.07.04

:first-child

:last-child

:only-child

css

疑似セレクタ

動的に要素を出力するコンテンツで子要素がひとつだけしか無い場合はCSSの指定を変えたい！ということはよくあります。
ひとつだけしか無い場合だけプログラムで分岐して専用のクラスを設定することで実現出来ますが、そのためだけに分岐を作る必要が出てくるため、プログラマーの工数が増えてしまいますね。
そんな時、CSSの疑似セレクタを使うことで子要素がひとつだけの時に反映させることが出来ます。
この記事では、子要素がひとつだけの時に反映させる指定方法をご紹介したいと思います。

この記事の目次を表示

1 前提条件
2 子要素がひとつだけの時に反映させる
- 2.1 :first-childと:last-childを組み合わせて指定する
- 2.2 :only-childを指定する
3 まとめ

前提条件

例えば、PHPで出力した結果、こんなHTMLになる場合もあれば、

<ul>
    <li>【CSS】子要素がひとつだけの時に反映させる指定方</li>
    <li>【CSS】子要素がひとつだけの時に反映させる指定方</li>
    <li>【CSS】子要素がひとつだけの時に反映させる指定方</li>
</ul>

こんなふうに、子要素がひとつだけになる場合もあると思います。

<ul>
    <li>【CSS】子要素がひとつだけの時に反映させる指定方</li>
</ul>

この子要素がひとつだけの時にCSSを反映させる方法の解説です。

子要素がひとつだけの時に反映させる

:first-childと:last-childを組み合わせて指定する

:first-childと:last-childを組み合わせることで子要素がひとつだけの時にCSSを反映させることが出来ます。

li {
    color: #dc5a45;
}
li:first-child:last-child {
    color: #3d8582;
    font-weight: bold;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

子要素がひとつだけということは、その子要素は最初の要素であり最後の要素になります。そのため、このように指定することで子要素がひとつだけの時にCSSを反映させることが出来ます。

:only-childを指定する

実はCSSには子要素がひとつだけの時に反映される専用の疑似セレクタが用意されています。
:only-childを使うことで子要素がひとつだけの時にCSSを反映させることが出来ます。

li {
    color: #dc5a45;
}
li:only-child {
    color: #3d8582;
    font-weight: bold;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

実は僕も最近まで:only-childの指定方法があるなんて知りませんでした。
この疑似セレクタの存在を知るまでは、:first-child:last-childの指定方法を使っていました。

まとめ

いかがでしたか？
CSSには便利な疑似セレクタがいろいろ用意されています。
今回ご紹介した:only-childもそのひとつです。
こういう疑似セレクタを取り入れることで余計な工数を削減することが出来ます。
そしてソースコードもスマートになると思います。
便利な疑似セレクタは積極的に取り入れていくようにしましょう。