:nth-child() of <selector>
The of syntax for the :nth-child() and :nth-last-child() CSS functional pseudo-classes match elements by the relative position of elements, counted from the first or last sibling matching a selector list.
Overview
The of syntax for the :nth-child() and :nth-last-child() CSS functional pseudo-classes match elements by the relative position of elements, counted from the first or last sibling matching a selector list.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.selectors.nth-child.of_syntax | 111 | 111 | 113 | 9 | 111 | 9 |
| CSS selector | ||||||
of syntax `of <selector>` syntax | 111 | 111 | 113 | 9 | 111 | 9 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
/* Count only elements with the .visible class and style every other one */
li:nth-child(even of .visible) {
background: #f3f4f6;
}
/* Apply a striped pattern only to the .active rows in the table */
tr:nth-child(odd of .active) {
background: #eff6ff;
}Live demo
Use cases
Using :nth-child() of <selector>
The of syntax for the :nth-child() and :nth-last-child() CSS functional pseudo-classes match elements by the relative position of elements, counted from the first or last sibling matching a selector list.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.
Related links
Powered by web-features