今回は、「兄弟関係にある」 n番目の要素を指定するセレクター「nth-child」のお話です。
初見でかるい気持ちで使用すると、css指定が効かなかったり、全然違う要素に効いたりするnth-childです。
「nth-of-type」の方が直感的に理解できるので、個人的にはそちらを使う機会の方が多いのですが、nth-childにもnth-childなりの良さがあるということで、解説記事を書いてみようと思います。
要素の種類に関係なく、n番目の要素を指定する
まず原則として、nth-childは、相手がhタグだろうとpタグだろうとaタグだろうと関係なく、とにかくn番目の要素を指定します。
その原則を踏まえた上で、さらに細かく条件づけしたいときに、「p:nth-child(3)」 ( = ３番目の要素で、なおかつpタグのとき)のような形をとります。
「３番目にでてくるpタグ」ではありません。それは「p:nth-of-type(3)」です。
下に例を載せておきます。
See the Pen poeRowL by Takashi Abe (@TakeshiAbe) on CodePen.
class をつけるとさらに条件が厳しくなる
タグにclassを指定すると、指定範囲がさらに絞り込まれます。
仮に、「p.test:nth-child(5)」だと、「５番めの要素で、ｐタグであり、さらにtestクラスを持つ要素」となります。
これに関してはnth-of-typeも同様で、「p.test:nth-of-type(5)」だと、「５番目のpタグで、なおかつtestクラスを持つもの」と指定されます。
雰囲気的に、５番目のp.test となりそうですが違います。
どちらも “child” や”type” という基本条件があって、そこから範囲を絞っていくイメージです。
下の例では、nth-of-typeへの指定は対象不在で無効になっています。
See the Pen NWpdWvv by Takashi Abe (@TakeshiAbe) on CodePen.
基本動作はここまでにして、次は指定方法いろいろです。
nth-childの指定方法
よく使うのを列挙します。
| 奇数 | nth-child(odd) / nth-child(2n+1) |
|---|---|
| 偶数 | nth-child(even) / nth-child(2n) |
| 5番目以降 | nth-child(n+5) |
| ５番目まで | nth-child(-n+5) |
| ２番めから５番目まで | nth-child(n+2):nth-child(-n+5) |
See the Pen mdWRdmV by Takashi Abe (@TakeshiAbe) on CodePen.
これはnth-child・nth-of-type共通事項です。
後ろから数える nth-last-child
後ろから数えたいときはnth-last-child というセレクタを使います。
数える方向が反対になるだけなので、単体では別にたいして面白みはないのですが、「子要素がn個以上ある場合は〜」という指定を、cssだけでできるようになります。
nth-last-childの応用で、if (i > n) を表現する
See the Pen RwpKbKE by Takashi Abe (@TakeshiAbe) on CodePen.
「〜」は、以下に続く兄弟要素すべてに作用するセレクタです 。
nth-last-child の進行方向は逆向きですが、それに「~」セレクタをつないだ範囲は、通常通り順方向への指定となります。
それらの応用で、要素がn個以上であれば○○ という指定が可能となるわけです。
