指定クラスを持つ要素の内のn番目、奇数・偶数個などの条件で装飾する。
課題
SNSの投稿の背景色を交互に変えたい。
兄弟要素が投稿のみの場合はdiv.xxx:nth-of-type(odd)
や:nth-child(odd)
で奇数の投稿を指定可能。
(odd
又は2n+1
で奇数、even
又は2n
で偶数)
投稿の間に何らかの要素が入る場合、カウントは兄弟要素全てが対象となりdiv.xxxの奇数は取れない。
(div.nth-of-type
は兄弟要素のdivがカウント対象、div:nth-child
は全ての兄弟要素がカウント対象)
div.xxx (投稿)
div.xxx (投稿)
div.aaa (日付区切り)
div.xxx (投稿)
この場合、兄弟要素のうち奇数でありdiv.xxxである1行目しか効かない。
実装
div:nth-child(odd of .xxx)
で指定する。
新しい規格の為現時点でFirefox等が未対応だが、自分用CSSや小規模サイトで使うので問題無し。
Can I use: css-nth-child-of