動的サイトで意外と便利！擬似クラス「:only-child」

こんにちは、中村です。
今回はCSSの擬似クラス「:only-child」についてご紹介しようと思います。

擬似クラスとは？

セレクタ要素の特定の状態に対してスタイルを当てるためのクラスです。
ユーザーの操作に反応したり、要素の状態によって見た目を変えることができます。
:hoverや:nth-childなどがよく使われます。

リンクやボタンなどにカーソルを触れた時に、背景色を変化させたり、矢印のアイコンを動かしたりすることで次の動作を促す効果が期待できます。

:nth-childは要素の順番に対する擬似クラスです。
偶数・奇数や特定の数の時にスタイルを変えることができます。
:nth-child(odd)、:nth-child(even)を使ったクラスは、表のセルの色を行毎交互に色を変えることで情報を読みやすくします。

そのほかの擬似クラスについてはこちらをご覧ください。

さて、今回紹介したかった:only-childについてです。
名前の通り、「唯一の子要素」に対するクラスになります。

    p:only-child { color: red;}

divタグの中にpが2つある場合はスタイルが当たりません。

<div>
    <p>text</p>
    <p>text</p>
</div>

divタグの中にpが1つだけある場合にスタイルが当たります。

<div>
    <p>text</p>
</div>

静的なページの場合、予め数がわかっているので使う機会が少ないと思いますが、
動的なページで、表示される要素の数が変わる場合に活躍します。
現時点のモダンブラウザとEdge・IE11にも対応しています。（IE10以前は確認していません）

商品情報の詳細ページなどで、全ての項目に入力されたページと、一部の情報しか入力されていないページがあった場合、アクセスするページの内容によってはスカスカな印象になってしまいます。
そこで:only-childを使って要素の幅を調整することで、情報が少ない時にも偏りすぎないようにできます。

サンプルは最大1つの要素が入る場合の、3つの時・2つの時・1つの時のそれぞれのスタイルです。
:only-childを使って、1つの時は幅いっぱいになるようにスタイルを当てています。

:only-of-typeにすると「同じ型の唯一の子要素」に指定することもできます。
作るページの仕様に合わせて使い分けると便利です。

    p:only-of-type { color: red;}

<div>
    <p>text</p>
    <ul>
        <li>list<li>
        <li>list<li>
        <li>list<li>
    </ul>
</div>

普段あまり使わないのですっかり忘れていましたが、ふと思い出して使ってみたら便利でした。
こういうものがあったな、くらいにでも覚えておくといざという時の問題解決につながります。
セレクタは他にもいろいろな種類がありますので、それぞれの使い道を考えていきたいですね。