Most developers know about the :nth-child() pseudo-class in CSS. It allows you to style elements based on their position inside a parent. For example:
li:nth-child(2) {
color: red;
}
This rule will select the second <li> inside its parent. Pretty straightforward.
But there’s a more powerful feature that many developers overlook: the of <selector> syntax.
What is of <selector>?
Normally, :nth-child() counts all child elements of a parent. But with the of <selector> syntax, you can limit that count only to the elements that match a specific selector.
In other words: instead of saying “give me the third child no matter what it is,” you can say “give me the third <li> that matches a certain condition.”
Example: Targeting specific classes
Let’s imagine a list where only some items are marked as important:
<ul>
<li class="important">First</li>
<li>Second</li>
<li class="important">Third</li>
<li class="important">Fourth</li>
<li>Fifth</li>
<li>Sixth</li>
</ul>
If you write:
li:nth-child(-n+3 of .important) {
color: blue;
}
This will select only the first three list items that have the class important.
Notice the difference:
- Without
of <selector>, CSS would look at the raw order of all<li>elements. - With
of .important, CSS only counts the<li>elements that match.important.
You can also use :not() inside the of <selector> to target the opposite case. For example:
li:nth-child(-n+3 of :not(.important)) {
color: green;
}
This will select the first three <li> elements that do not have the class important.
Notice how flexible this becomes: instead of styling everything or adding extra classes, you can precisely define the subset of elements you want.
Why is this useful?
The of <selector> syntax is great when:
- You want to style only the first or last few elements of a certain type.
- You’re working with lists or grids where not every child matches the same criteria.
- You want more control without having to add extra classes in your HTML.
It’s a cleaner way to target elements without increasing the complexity of your markup.
Browser support
The of <selector> syntax is relatively new, but it has good support in modern browsers. If you’re working on a project that needs to support older browsers, make sure to test or provide fallbacks.
Conclusion
The :nth-child() pseudo-class is already powerful, but the of <selector> syntax takes it to the next level. By combining position-based selection with specific conditions, you can write CSS that is both expressive and flexible.
Next time you need to target only a subset of elements in a list or grid, remember that :nth-child(of <selector>) might be the perfect tool.
Top comments (0)