CSS3 provides powerful pseudo-classes that allow the designer to select multiple elements according to their positions in a document tree. Using these pseudo-classes can be a little confusing at first, but it becomes a lot easier over time to set up your layout.

In today’s article I’m going to take a look at 5 pseudo-classes that will simplify our design process and reduces a lot of time to create a certain visual effects. You will also find demonstration below each point to demonstrate how we can use these selectors in different design scenario you face everyday in your designing process.

1. The ‘nth-child’ Pseudo-selector

One of my favorite pseudo-selectors is the nth-child. This can be very useful if you are dealing with a Content Management System where you have no ability to change the server-side code to add classes into the markup.
This pseudo-class matches elements on the basis of their positions within a parent element’s list of child elements. The pseudo-class accepts an argument, N, which can be a keyword or a number. The argument N can also be given as an+b, where a and b are integers (for example, 3n+1). For example, if the argument is 3, the third element will be selected.

How to use the nth-child

If you put simply a number in the parentheses, it will only affect the element associated with that number. For example, here is how to select only the 3rd element:

ul li:nth-child(3) {
  background-color: #333;
}

Now let’s look at the table below for Pseudo-class Expressions, the first column of the table represents values for n, and the other columns display the results (for N) of various example expressions.
The 'nth-child' Pseudo-selector
Thus the expression 2n+1 will match the first, third, fifth, seventh, ninth, and so on, elements if they exist. This can be used to create alternated <li> background color.

ul li:nth-child(2n+1) {
  background:#dfe6ec;
  color: #333;
}

The 'nth-child' Pseudo-selector

Check out our demo.

Browser Support:
Internet Explorer has no support at all for the :nth-child pseudo-class. But if you are using jQuery, which supports all CSS selector including :nth-child, the selector will work, even in Internet Explorer.

Further Resources on how to use the nth-child

The :target pseudo-class

This pseudo-class affects an element that’s the target of a fragment identifier ( point to a specific element on a page, represented by a “#” and an anchor) in the document’s URL. When we click on a link that ends with a fragment identifier that element we are pointing to becomes the target (hence :target).

How to use the target

For example, if the URI was http://devsnippets.com/article/5-advanced-css-pseudo-class.html#nth, the following selector would match the element that had an id attribute of “nth”:

div > div:target {
background:#FFC1E4 none repeat scroll 0 0;
border:3px solid #EF4F7A;
padding:10px;
}

The 'target' Pseudo-selector

Check out our demo.

Browser Support:
Internet Explorer has no support at all for the :target pseudo-class. Opera doesn’t support this selector when using the back and forward buttons. Other than that, it has support from the other major browsers.

Further Resources on how to use the target

3. Use the :focus Pseudo Class

You can apply styling to your input areas and textareas that only takes affect when a user has clicked into that area using the :focus pseudo class. For example, you could change the background and border color on those elements like so:

textarea:focus, input:focus {
	background:#FFC1E4;  
        border:3px solid #EF4F7A;
}  

The 'focus' Pseudo-selector

Check out this demo.

Browser Support:
Most browsers support the :focus Pseudo Class.

4. The negation pseudo-class: :not()

The :not() pseudo-class is extremely useful when you want to apply a style to a class or group of elements, and want to exclude some element(s).
The code below selects all div elements that do not have .comment class.

div:not(.comment) {
border:1px solid #333
}

You can use a comma to choose more than one class. The code below selects all div elements that do not have .comment or .post classes.

div:not(.comment, .post) {
border:1px solid #333
}
Browser Support:
The :not() pseudo-class is only supported by modern browsers (Firefox, Safari and Opera), but not internet explorer.

5. The only-of-type pseudo-class

The only-of-type pseudo-class matches an element that’s the only child element of its type.
This selector will match an img element that’s the only child img element of its parent element:

.post > img {
	float: left;
	}

.post > img:only-of-type {
	float: none;
	margin: 10px;
	}

only-of-type

Check out our demo.

Browser Support:
The only-of-type pseudo-class is only supported by modern browsers (Firefox, Safari and Opera), but not internet explorer.

Author: Noura Yehia

Noura Yehia is a Web Designer, Blogger and Creative Thinker. Founder of Noupe.com a popular blog about web design, tutorials, resources and inspiration. If you’d like to connect with her, you can follow her on Twitter or at her blog Devsnippets.