cocone engineering

こんにちは。ウェブ開発室でフロントエンド業務を担当している石井です。

最近、Netflixで配信されているサイバーパンク: エッジランナーズというアニメを観ましたが、面白すぎて久しぶりに夜通しで一気観してしまいました٩( ᐛ )و
年齢制限のある作品なので、過激な表現もありますが、TRIGGERが好き、サイバーパンクの雰囲気が好きという方にオススメのアニメです！

 

今回の記事では「CSSで子要素の数によってスタイルを変更させる」方法について、ご紹介します。

DEMO

百聞は一見にしかずと言うので、まずは事前に用意したDEMOをご覧ください。

 

See the Pen
dynamic-style by Yusuke Ishii (@ishii_cocone)
on CodePen.

解説

<!-- 子要素が1個 -->
<div class="container">
  <div class="item"></div>
</div>

<!-- 子要素が2個 -->
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
</div>

<!-- 子要素が3個 -->
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

大枠としては全て同じですが、親要素内の子要素数が違っています。

通常、この様な構造でCSSを要素数別に適用させたい場合、影響範囲が広いので親要素に

.one / .two / .three …

といった風にclass名を付けて影響範囲を絞るなど対応が必要になると思います。

この様なケースでclass名を増やさずにCSSを当てたい場合、次のCSSが役に立ちます。

 

/* 子要素が1個 */
.item:only-child {
}

/* 子要素が2個 */
.item:first-child:nth-last-child(2),
.item:first-child:nth-last-child(2) ~ * {
}

/* 子要素が3個 */
.item:first-child:nth-last-child(3),
.item:first-child:nth-last-child(3) ~ * {
}

要素数が1つの場合

.sample:only-child {}

要素数が1つ以上の場合

.sample:first-child:nth-last-child(n),
.sample:first-child:nth-last-child(n) ~ * {}

要素数が1つ以上の場合が少し分かりづらいですが、`:first-child:nth-last-child(n)` と書くことによって最初の要素が最後から数えてn番目だった場合と定義できます。

最初の要素が条件にマッチしていれば、次に書かれている`:first-child:nth-last-child(n) ~ *` でそれ以降の要素にもCSSを適用することが可能です。

DEMO内でも検証していますので、詳しく確認したい方はそちらも参考にして下さい。

まとめ

今回は「CSSで子要素の数によってスタイルを変更させる」方法について、ご紹介しました。

利用する機会はそれほど多くないかもしれませんが、知っておくと役に立つ時があると思いますので、ご活用いただければ幸いです！

 

---

 

ココネでは一緒に働く仲間を募集中です。

ご興味のある方は、ぜひこちらの採用特設サイトをご覧ください。

https://www.cocone.co.jp/recruit/contents/