:nth-child()
:nth-child()は兄弟要素の中でn番目の要素を絞り込めるセレクタです。
li:nth-child(1){/*1番目の利要素*/}
li:nth-child(5){/*5番目の利要素*/}引数にしていした番目の要素が選択できます。
li:nth-child(2n+1){/*奇数番目のtd要素*/}
li:nth-child(2n-1){/*奇数番目のtd要素*/}
li:nth-child(odd){/*奇数番目のtd要素*/}
li:nth-child(2n){/*偶数番目のtd要素*/}
li:nth-child(even){/*偶数番目のtd要素*/}li:nth-child(2n+1)、li:nth-child(2n-1)もしくはli:nth-child(odd)では奇数番目のLi要素が、li:nth-child(2n)もしくはli:nth-child(even)では偶数番目のli要素がセレクタで指定されます。
要素を最後からカウントしたい場合は:nth-last-child()を利用します。
:nth-of-type()との違いは全ての兄弟要素をカウントするか、特定の要素のみをカウントするかです。
参考URL
6.6.5.2. :nth-child() pseudo-class
登録日 : 2013年01月14日 最終更新日 : 2013年1月14日
同じカテゴリー(Selector)のエントリー
- 兄弟セレクタ
- 隣接セレクタ
- 子セレクタ
- :not()
- idセレクタ
- classセレクタ
- ::after
- ::before
- ::first-letter
- ::first-line
- :indeterminate
- :checked
- :disabled
- :enabled
- :lang()
- :target
- :focus
- :active
- :hover
- :visited
- :link
- :empty
- :only-of-type
- :only-child
- :last-of-type
- :first-of-type
- :last-child
- :first-child
- :nth-last-of-type()
- :nth-of-type()
- :nth-last-child()
- :nth-child()
- :root
- 属性セレクタ
- 子孫セレクタ
- 要素セレクタ
- ユニーバサルセレクタ