順番を指定する「:nth-child()」などの擬似クラスでは変数「n」を指定することができます。変数「n」を使って兄弟要素の範囲を指定してみましょう。
兄弟要素のX番目から以前を指定する
ある兄弟要素のX番目から以前を全て指定したい場合は「:nth-child(-n+X)」と擬似クラスで指定します。例えば、4番目以前の兄弟要素を全て指定したい場合は下記のようになります。
※ここで注意してほしいことが一つあります。「:nth-child()」は親から数えた数です。下記の場合、divの存在が親です。親に内在したpが子要素となります。
|
1 2 3 4 5 6 7 8 |
<div><!-- 親要素のdiv --> <p class="order">一番目</p> <p class="order">二番目</p> <p class="order">三番目</p> <p class="order">四番目</p> <p class="order">五番目</p> <p class="order">六番目</p> </div> |
|
1 |
.order:nth-child(-n+4) { プロパティ:値;} |
上記の指定で変数「n」には 0, 1, 2, 3, 4 が入ります。「:nth-child(-n+X)」に当てはめると下記になります。
-0 + 4 = 4
-1 + 4 = 3
-2 + 4 = 2
-3 + 4 = 1
同じく順番を逆から指定する「:nth-last-child()」の擬似クラスだと後ろからX番目までと指定することができます。
兄弟要素のX番目から以降を指定する
ある兄弟要素のX番目から以降を全て指定したい場合は「:nth-child(n+X)」と擬似クラスで指定します。例えば、2番目以降の兄弟要素を全て指定したい場合は下記のようになります。
|
1 |
.order:nth-child(n+2) { プロパティ:値;} |
兄弟要素のX番目からY番目までを指定する
上記、二つの擬似クラスを合わせることで兄弟要素のX番目からY番目までを指定することができます。例えば2番目から5番目までの兄弟要素を指定したい場合は二つの擬似クラスを：（コロン）で区切って組み合わせることができます。
|
1 |
.order:nth-child(n+2):nth-child(-n+5) { プロパティ:値;} |