CSSの兄弟要素の個数によってCSSを変えたい時、CSSには個数を判定して変えるセレクタはありません。その代わり「:nth-*」と「:nth-last-*」の擬似クラスを使い兄弟要素の個数を判定することができます。
「:first-child」と「:nth-last-child」の擬似クラス
「:nth-*」は何番目かを指定する擬似クラスです。「:nth-last-*」は後ろから何番目かを指定するセレクタです。また、「:first-child」は兄弟要素の一番初めを指定する擬似セレクタです。逆に「:nth-last-child」は後ろから数えて何番目かを指定する擬似クラスですが、この二つの擬似クラスを組み合わせて兄弟要素の個数を判定して見ます。
|
1 2 3 4 5 6 7 8 |
<div><!-- 親要素のdiv --> <p class="text">1</p> <p class="text">2</p> <p class="text">3</p> <p class="text">4</p> <p class="text">5</p> <p class="text">6</p> </div> |
|
1 2 |
.text:first-child:nth-last-child(6), .text:first-child:nth-last-child(6)~ .text {} |
上記のCSSでは、「:first-child」と「:nth-last-child(6)」で選択された要素が一致した場合、はじめのp（パラグラフ）が選ばれます。そして残りの五つのp（パラグラフ）選択するのは間接結合子「~」を使い選択させます。この間接結合子「~」は二つのセレクタを接続することができます。上記のように「.text:first-child:nth-last-child(6)~ .text」に指定したら同じ親要素に属する要素の中で結合する全ての要素が選択できます。よって(6)の数字を変えれば個数の判定ができることになります。
兄弟要素が一つだけなら下記のような擬似クラスもあります。
|
1 |
.text:only-child {} |
個数指定に条件をつける
関数「n」が使えるわけなので、偶数「2n」や奇数「2n+1」などで、兄弟要素の個数に奇数ならや偶数ならと言った条件をつけることも可能です。
|
1 2 |
.text:first-child:nth-last-child(4), .text:first-child:nth-last-child(4)~ .text:nth-child(2n) {} |
|
1 2 |
.text:first-child:nth-last-child(5), .text:first-child:nth-last-child(5)~ .text:nth-child(2n+1) {} |
また、3以上「n+3」や、3以下「-n+3」など、兄弟要素のある数字から以上、以下と言った条件をつけることも可能です。
|
1 2 |
.text:first-child:nth-last-child(n+3), .text:first-child:nth-last-child(n+3)~ .text: {} |
|
1 2 |
.text:first-child:nth-last-child(-n+3), .text:first-child:nth-last-child(-n+3)~ .text:{} |