【CSS】 「子要素」の数によって「レイアウト」「色」などを変える方法

こんにちは、さち です。

今回は、子要素の数によって適用する「レイアウト」「色」などの CSS を変更する方法について書いていきます。

実装方法

サンプルソース

HTML でサイコロを作成してみました。サイコロの目は <b> 要素で作っています。

<div class="dice one">
  <b></b>
</div>

<div class="dice two">
  <b></b> <b></b>
</div>

<div class="dice three">
  <b></b> <b></b> <b></b>
</div>

<div class="dice four">
  <b></b> <b></b> <b></b> <b></b>
</div>

<div class="dice five">
  <b></b> <b></b> <b></b> <b></b> <b></b>
</div>

<div class="dice six">
  <b></b> <b></b> <b></b> <b></b> <b></b> <b></b>
</div>

ここで、目の数が4以上のサイコロにだけ適用する「CSS」を考えてみましょう。

例えば、「背景色」を変える CSS はこんな感じになります。

.dice:has( :nth-child(4) ) {
  background: gold;
}

.dice:has( :nth-child(4) ) は、4個目の「子要素（今回は <b> 要素） 」を持っている .dice 要素という意味です。

つまり、子要素である <b> 要素を4個以上持っている .dice 要素だけ、「背景色」が「ゴールド」に変わります。

結果

ちゃんと、目の数が4以上のサイコロだけ「背景色」が変わっていますね。

ちなみに、「」「」ボタンで :nth-child() の数字を変えることもできるので、結果がどう変化するのかも確認してみて下さい。

今回は「背景色」を変えましたが、CSS の内容を変えれば「レイアウト」の変更などにも使えますよ。