疑似要素 nth-child の使い方いろいろ

HTML/CSS

今回は、「兄弟関係にある」 n番目の要素を指定するセレクター「nth-child」のお話です。

初見でかるい気持ちで使用すると、css指定が効かなかったり、全然違う要素に効いたりするnth-childです。

「nth-of-type」の方が直感的に理解できるので、個人的にはそちらを使う機会の方が多いのですが、nth-childにもnth-childなりの良さがあるということで、解説記事を書いてみようと思います。

スポンサーリンク

要素の種類に関係なく、n番目の要素を指定する

まず原則として、nth-childは、相手がhタグだろうとpタグだろうとaタグだろうと関係なく、とにかくn番目の要素を指定します。

その原則を踏まえた上で、さらに細かく条件づけしたいときに、「p:nth-child(3)」 ( = 3番目の要素で、なおかつpタグのとき)のような形をとります。

「3番目にでてくるpタグ」ではありません。それは「p:nth-of-type(3)」です。

下に例を載せておきます。

See the Pen poeRowL by Takashi Abe (@TakeshiAbe) on CodePen.

class をつけるとさらに条件が厳しくなる

タグにclassを指定すると、指定範囲がさらに絞り込まれます。

仮に、「p.test:nth-child(5)」だと、「5番めの要素で、pタグであり、さらにtestクラスを持つ要素となります。

これに関してはnth-of-typeも同様で、「p.test:nth-of-type(5)」だと、「5番目のpタグで、なおかつtestクラスを持つもの」と指定されます。

雰囲気的に、5番目の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)
5番目までnth-child(-n+5)
2番めから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個以上であれば○○ という指定が可能となるわけです。

ミフネWEB
タイトルとURLをコピーしました