知っておくと便利なCSSのセレクタ！ :has()疑似クラスを使用すると、子の数に基づいて親要素のスタイルを定義できる

CSSはどんどん便利になってますね！
:has()もその一つで、指定した要素がある場合にのみスタイルを適用できます。その機能を利用して、子の数に基づいて親要素のスタイルを定義することができます。たとえば、子要素が3個以下の場合、ちょうど5個の場合、7～9個の場合などに親要素に異なるスタイルを設定するのが簡単です。

Style a parent element based on its number of children using CSS :has()
by Bramus

:has()について詳しく知りたい人は、以前の記事をご覧ください。

• CSSの:has()疑似クラスの便利な使い方を徹底解説

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• はじめに
• :has()を使用して、子の数に基づいて親要素のスタイルを設定
• :has()の仕組み
• デモページ
• ブラウザのサポート

はじめに

CSS では疑似クラスの:nth-childを使用して、兄弟の数に基づいて要素のスタイルを設定できます。しかし、子の数に基づいて親要素のスタイルを設定したい場合はどうすればよいでしょうか？

その答えは、CSSの:has()です！

:has()を使用して、子の数に基づいて親要素のスタイルを設定

まずは、:has()を使用した実際のコードをご覧ください。

:has()の仕組み

上記で構築された各セレクタのパターンは、次の通りです。

• parent:has()を使用することで、条件を満たす親要素を選択。
• :has()に>を渡すことで、親の直接の子を対象に。
• count-condition（カウントの条件）は、実行したい選択の種類ごとに考える必要があります。数量クエリと同様に:nth-child()を使用します。

最大x個の子

:nth-childに負の-nを設定すると、最初のx個の子を選択できます。そのうちの1つが最後の子である場合、親に最大x個の子があるかどうかが分かります。

このセレクタは、子を持たない親要素を除外します。テキストだけを含む要素はすべて一致するため、ほとんどの場合これは問題ありません。含めたい場合は、代わりに下記のセレクタを使用します。

ちょうどx個の子

ちょうどx個を選択するには、nを設定せずに:nth-childを使用します。その子が最後の子である場合、親にちょうどx個の子があるかどうかが分かります。

少なくともx個の子

少なくともx個の子がある親を選択するには、その中に子がx個あるか分かれば判断できるので、:last-childは必要ありません。

x～y個の子

範囲の選択をするには、:has()の条件式を2つ組み合わせます。1つ目の条件式にはx個以上の子を持つすべての要素を選択し、2つ目の条件式にはy個以上の子を持たない要素のみを選択することで、範囲を設定できます。これで2つの条件式に一致する要素のみが分かります。

デモページ

実際の動作は、デモページをご覧ください。
:has()を使用して、子の数に基づいて親要素のスタイルを設定しています。

• 最大3個の子: レッドのアウトライン
• ちょうど5個の子: ブルーのアウトライン
• 10個以上の子: グリーンのアウトライン
• 7～9個の子: イエローのアウトライン

See the Pen
Styling parent elements based on the number of children with CSS :has() by Bramus (@bramus)
on CodePen.

ブラウザのサポート

この記事で紹介したセレクタは、:has()をサポートしているすべてのブラウザで機能します。

:has()のサポートブラウザ

2022年11月現在、Firefoxではサポートされていません。Firefoxの実験的な機能で:has()を有効にしても機能しません。