HTML要素の数でCSSをあて分ける
要素の数がｎ個の時だけ特別なCSSを当てたいときが、たまにありますよね。
数が事前に分かっていれば、要素数が３個の時用のclass、４個の時用のclass、、というようにCSSで簡単に対応できますが、数が可変な時はこの方針は難しくなってきます。
仕方ないからJSで要素数を取得して..となりがちですが、実はCSSだけで要素の数に応じてスタイルをあて分けることが可能です！
今回はその方法をお伝えしていきます。
今回はその方法をお伝えしていきます。
要素数が０個の時
要素数が０個の時だけCSSを当てたい時のための特別なセレクタとして、 :empty がすでに用意されているので、非常にシンプルに書くことができます。
:empty
ul:empty {
/* 空のul要素に当てたいスタイル */
}かなり似たセレクタに :blank というものもあります。２つの違いは以下の通りです。
- :empty
- 要素の中身が完全に空の時だけ適用される
- IE9から使え、現状で利用されているほぼ全てのブラウザーで使用可能
- :blank
- 要素の中身が空の時だけ適用される（半角スペースが入っていても空と見なす）
- まだ草案レベルであり、使えるブラウザーはほぼない（2020年後半現在）
:blankの方が使い勝手が良いケースもありますが、現状では対応しているブラウザが少ないので、しばらくは:emptyを使っておく方が良さそうです。
要素数が１個の時
要素数が１個の時は、 :only-child セレクタを利用するのが簡単です。
:only-child
li:only-child {
/* 1つしかないli要素に当てたいスタイル */
}先ほどの :empty は親要素に指定する、:only-child は子要素に指定するという違いがあるので注意してください。
要素数が２個以上の時
ここからが今回の本題です！
CSSセレクタに元から用意されている機能そのままでは実現できないので、少しだけトリッキーな指定をする必要があります。
CSSセレクタに元から用意されている機能そのままでは実現できないので、少しだけトリッキーな指定をする必要があります。
使うのは :first-child セレクタ、 :nth-last-child(n) セレクタ、間接セレクタです。
それぞれの使い方は難しくなく、個別には使ったことがある方も多いのではないでしょうか。
- :first-child
- 先頭の要素にだけスタイルが当たる
- :nth-last-child(n)
- 後ろから数えてｎ番目の要素にだけスタイルが当たる
- 間接セレクタ
- a 〜 b のように書いた時、a要素の後にくるb要素（弟要素）にだけスタイルが当たる
この二つのセレクタは li:first-child:nth-last-child(3) のように組み合わせて使うことができます。
このように書いた場合、先頭の要素 かつ 後ろから数えて3番目の要素 にだけスタイルが当たります。
図示すると以下のように、要素数が全体で３個の時の１番目の要素にだけ当たることが分かりますね。
図示すると以下のように、要素数が全体で３個の時の１番目の要素にだけ当たることが分かりますね。
ここまで来たら、あとは間接セレクタを使うだけです。
上で特定した要素数が全体で３個の時の１番目の要素の後にくる弟要素に対してもセレクタが適用されるようにします。
間接セレクタを組み合わせる
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li { }
これで当初の目的であった要素数がｎ個の時だけ特別なスタイルを当てたいが実現しました。
この手法を使えば要素の数によって幅を変えることなどができます。
要素の数によって幅を変える
//要素が２つの時は幅を50%に
li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2) ~ li { width: 50%; }
//要素が３つの時は幅を33.3%に
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li { width: 33.3%; }
//要素が４つの時は幅を25%に
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li { width: 25%; }要素の数がページによって違うタブなどに使うと便利ですね。
要素が多い時は文字を小さくする、奇数の時はborderを調整するなど発想次第で他にもいろいろな使い方ができそうですね。
要素が多い時は文字を小さくする、奇数の時はborderを調整するなど発想次第で他にもいろいろな使い方ができそうですね。
まとめ
HTML要素の数でCSSをあて分ける手法の説明でした。
CSSセレクタは意外と奥が深く、組み合わせや発想次第でいろいろと便利に使うことができますね。
