Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

nth child

The nth-child structural pseudo-class selector will target child elements according to their position in their specified parent element. Define the numeric value for position in between the parenthesis. The second code example shows how to add structural logic to alternate styles for child elements.
Syntax Logicelement:nth-child( integer | divisible_by ) { color:#F00; }

CSS Code Example

<style> li:nth-child(2) { color:#F00; } </style> <ul> <li>list item content...</li> <li>list item content...</li> <li>list item content...</li> </ul> Use the even/odd keywords to alternate styles: <style> li:nth-child(even) { color: red; } li:nth-child(odd) { color: blue; } </style> <ul> <li>list item content...</li> <li>list item content...</li> <li>list item content...</li> <li>list item content...</li> <li>list item content...</li> <li>list item content...</li> </ul> This creates the same even/odd logic by styling elements that are divisible by a specified number. This means you can target all element in positions that are divisible by 5 or any other number. <style> li:nth-child(2n+0) { color: red; } li:nth-child(2n+1) { color: blue; } </style> <ul> <li>list item content...</li> <li>list item content...</li> <li>list item content...</li> <li>list item content...</li> <li>list item content...</li> <li>list item content...</li> </ul>

CSS

Selectors

universaltypecompoundclassidnotattributedescendantchildadjacent siblinggeneral siblingfirst childlast childonly childfirst of typelast of typeonly of typenth childnth last childnth of typenth last of typeemptyrootfirst linefirst letterbeforeafterlinkvisitedhoveractivefocustargetenableddisabledcheckedlang