CSS tutorial

How to select childs elements

You can select one or more child elements via the nth-child(n) pseudo class selector.

Child elements are indexed from 1.

Click on code to see result.

// selects 5th item
#myList li:nth-child(5){
   ...
}

// selects every 3th item
#myList li:nth-child(3n){
   ...
}

// selects all items from 6th item
#myList li:nth-child(n+6){
   ...
}

// selects all items up to 6th item
// inclusive
#myList li:nth-child(-n+6){
   ...
}

// selects items in range
// [4; 8]
#myList li:nth-child(n+4):nth-child(-n+8){
   ...
}

item 1
item 2
item 3
item 4
item 5
item 6
item 7
item 8
item 9

Previous

Next