:nth-child()
:nth-child(n) selects elements based on their position among siblings. It accepts numbers, keywords (odd/even), and formulas like 3n+1.
CSS
Intermediate
5 min read
:nth-child() Pseudo-Class
Example
tr:nth-child(even) { background: #f8f9fa; } /* Zebra rows */
li:nth-child(3) { color: red; } /* 3rd item */
li:nth-child(-n+3) { font-weight: bold; } /* First 3 items */
li:nth-child(n+4) { display: none; } /* Hide after 3rd */
/* Every 3rd starting from 1st: 1, 4, 7, 10... */
li:nth-child(3n+1) { border-left: 3px solid blue; } Pro Tip
nth-child counts all sibling elements, then checks if they match the selector — it does not filter first.