CSS: Pseudo Class Selectors

I’ll be covering a lot more in this blog post later on, but first I wanted to briefly go over some of the CSS pseudo class selectors I’ve been using more frequently. If you work with CSS, you’re probably familiar with these 4 pseudo class selectors: a:link, a:active, a:visited and a:hover; which have been in use for quite some time and have wide browser support. Many of the other pseudo class selectors are supported in most browsers except IE8 and below.

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.