With wider adoption of the position/number pseudo class selectors we can achieve things in our style sheet that may have only been possible with server side programming in the past. In the below example, I have selected the 2nd paragraph within #content and applied styles to that paragraph only.
#content p:nth-child(2){line-height:20px;color:#990000;}With the example below, I have set every 5th list element to have a text color of black. “(5*0)+5=5”, “(5*1)+5=10”, “(5*2)+5=15” etc.
ul li:nth-child(5n+5) { color: #000000; }You can also use the below code to target odd or even rows of an html table.
tr:nth-child(odd){ background-color:#ccc; } tr:nth-child(even){ background-color:#000; }More info on pseudo class selectors can be found here.