
子要素の数によってスタイルを変更させる
-
2022年11月24日
こんにちは。ウェブ開発室でフロントエンド業務を担当している石井です。
最近、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で子要素の数によってスタイルを変更させる」方法について、ご紹介しました。
利用する機会はそれほど多くないかもしれませんが、知っておくと役に立つ時があると思いますので、ご活用いただければ幸いです!
ココネでは一緒に働く仲間を募集中です。
ご興味のある方は、ぜひこちらの採用特設サイトをご覧ください。