nth-of syntax

The advanced nth-child syntax gives a new keyword ("of"), which lets you use the existing micro syntax of An+B, with a more specific subset within which to search.

If you use regular nth-child, such as :nth-child(2) on the special class, the browser will select the element that has the class special applied to it, and also is the second child. This is in contrast to :nth-child(2 of .special) which will first pre-filter all .special elements, and then pick the second one from that list.

// CSS
/* = Select the element with the class .highlight that is also the 2nd child */
.highlight:nth-child(2) { 
	outline: 0.3rem dashed lightgreen;
	outline-offset: 0.7rem;
}

/* = Select the 2nd child element that has the class .highlight applied to it */
:nth-child(2 of .highlight) { 
	outline: 0.3rem dashed hotpink;
	outline-offset: 0.7rem;
}



// HTML
<ul class="albums">
    <li class="sale"></li>
    <li class="highlight"></li> // lightgreen
    <li></li>
    <li></li>
    <li></li>
    <li class="highlight"></li> // hotpink
    <li class="sale"></li>
    <li></li>
    <li class="highlight"></li>
</ul>

https://developer.chrome.com/blog/whats-new-css-ui-2023/#nth-of-syntax