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.

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

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

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;
}

Check out our demo.

Further Resources on how to use the target

• - The CSS3 :target Pseudo-class And CSS Animations

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;
}  

Check out this demo.

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
}

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;
	}

Check out our demo.