In a couple of the previous tutorials we looked at child selectors and pseudo classes. In this tutorial, we will move on to the nth-child selector. The nth-child selector is used to select every element that is the nth child of a parent. For example, you could apply a style to every 2nd paragraph (every 2nd child) in a div. When using the nth-child selector, ‘n’ can be a number, a keyword or a formula.
In the example below we can change the colour of every 5th paragraph inside a div called ‘mydiv’. Because ‘n’ is 5, every 5th element will be selected.
#mydiv p:nth-child(5){ color:red; } |
Here is an example of a keyword being used to apply a background-color style to odd paragraphs inside a div:
#mydiv p:nth-child(odd){ background-color:green; } |
Watch the video below to see some of the different numbers, keywords, and formulas that can be used with the CSS nth-child selector. Then scroll down to see the sample code.
Here is the HTML sample code:
<!DOCTYPE html> <html> <head> <title>CSS nth-child() selector</title> <meta charset="utf-8"/> <link rel="stylesheet" href="resources/stylesheet11.css" type="text/css"/> </head> <body> <div id="mydiv"> <p>The quick brown fox jumped over the lazy dog</p> <p>The quick brown fox jumped over the lazy dog</p> <p>The quick brown fox jumped over the lazy dog</p> <p>The quick brown fox jumped over the lazy dog</p> <p>The quick brown fox jumped over the lazy dog</p> <p>The quick brown fox jumped over the lazy dog</p> <p>The quick brown fox jumped over the lazy dog</p> <p>The quick brown fox jumped over the lazy dog</p> </div> </body> </html> |
And here is the CSS code showing just the ‘even’ selection example from the video:
#mydiv p:nth-child(even){ background-color:black; color:white; } |
Make sure you watch the video to see more examples of the numbers, keywords and formulas you can use with the nth-child selector. This video is also available here on my YouTube channel.