指定クラスを持つ要素の内の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