:nth-childのofセレクタ

:nth-childのof SelectorがFirefox113に実装されたことで、全主要ブラウザで利用可能になった。

<ul>
  <li>one</li>
  <li class="important">two</li>
  <li>three</li>
  <li class="important">four</li>
  <li>five</li>
  <li class="important">six</li>
  <li>seven</li>
  <li class="important">eight</li>
  <li>nine</li>
  <li class="important">ten</li>
</ul>

/* 奇数(odd)、偶数(even) */
li:nth-child(odd)::after {
  content: ': odd';
}

/* 関数表記（数列） */
li:nth-child(3n + 1)::after {
  content: ': 3n+1'
}

/* .importantを持つ 2n+1 番目の要素 */
:nth-child(2n + 1 of .important)::after {
  content: ': 2n+1 of .important'
}

デモ

• one
• two
• three
• four
• five
• six
• seven
• eight
• nine
• ten