Web Design: A Guide to CSS3 pseudo-classes

This article is part of our “HTML5/CSS3 Tutorials series" – dedicated to help make you a better designer and/or developer. Click here to see more articles from the same series.

The pseudo-classes are used to target elements without having to add extra classes, attributes or ID; that is why it is called in that way, pseudo-class. Throughout our previous posts, we have covered a few new CSS3 pseudo-classes, including :not, :before and :after, :first-of-type and we also use pseudo-classes in some of our tutorials.

And in this post we are going to walk through the other new CSS3 pseudo-classes that have not been covered yet. Let’s take a look.

:nth-child

:nth-child is used to target elements in a particular order of their parent. This pseudo-class is used in conjunction with the following parameters: a number (1, 2, 3, etc), a keyword (odd / even) or an equation (an, an+b, an-b, etc). In the following example, we have three paragraphs inside a <div>.

 <div> <p><strong>Paragraph 1:</strong>Tiramisu gummi bears faworki dragee. Faworki faworki dessert sweet. Souffle powder biscuit lemon drops topping wypas.</p> <p><strong>Paragraph 2:</strong>Sweet icing applicake. Apple pie applicake bonbon cake danish cookie jujubes. Topping croissant tiramisu pie jelly-o pudding.</p> <p><strong>Paragraph 3:</strong> Oat cake pastry chocolate dessert brownie wafer candy. Caramels chocolate cake marzipan. Biscuit candy pudding dessert brownie dragee halvah donut gummi bears.</p> <div>

Let’s say, we want to add styles to the second paragraph, we can write the style rules as follows.

 p:nth-child(2) { padding: 15px; background-color: #333; color: #fff; }

We can also use an equation to select, let’s say, for paragraph number 2, 4, 6, and the following numbers in that sequence. We can write the styles rule this way.

 li:nth-child(2n) { padding: 5px; background-color: #333; color: #fff;s margin: 10px 0; }

The n notation in the equation above represents the sequence number (0, 1, 2, 3, etc). In the above example, 2 will be multiplied by n, which turns out the following results:

2(0) = 0 (select nothing)
2(1) = 2 (select 2nd child element)
2(2) = 4 (select 4th child element)
2(3) = 6 (select 6th child element)
… etc

To see how it works in a different equation, you can use this tool, called the nth tester.

However, in order this for this pseudo-class to select the child elements accurately, the elements order should not be preceded with other element types. Given the following HTML markup as the example, we have three paragraphs. We insert <blockquote> element after the first paragraph:

 <div> <p><strong>Paragraph 1:</strong>Tiramisu gummi bears faworki dragee. Faworki faworki dessert sweet. Souffle powder biscuit lemon drops topping wypas.</p> <blockquote> <p><strong>Blockquote</strong> Oat cake sugar plum tiramisu jelly cupcake dragee powder. Caramels pastry pie danish fruitcake bonbon chocolate cake bear claw.</p> </blockquote> <p><strong>Paragraph 2:</strong>Sweet icing applicake. Apple pie applicake bonbon cake danish cookie jujubes. Topping croissant tiramisu pie jelly-o pudding.</p> <p><strong>Paragraph 3:</strong> Oat cake pastry chocolate dessert brownie wafer candy. Caramels chocolate cake marzipan. Biscuit candy pudding dessert brownie dragee halvah donut gummi bears.</p> </div>

Now, if we select the second paragraph with the following styles rule.

 p:nth-child(2) { padding: 15px; background-color: #333; color: #fff; }

Nothing will not be applied, as the second child element is now replaced with <blockquote>.

View Demo

:nth-last-child

The :nth-last-child pseudo-class works the same as :nth-child, only now, the sequence starts from the last child.

So, when we apply this style below:

 p:nth-last-child(1) { padding: 15px; background-color: #333; color: #fff; }

The element that is applied is the very last paragraph element of its parent.

View the demo below.

View Demo

:nth-last-of-type

:nth-last-of-type works in a similar way as :first-of-type which we have discussed in our previous post.

It selects the specified child element regardless of even when the sequence is interrupted by other element types. And similar to :nth-last-child the sequence will start from the very last element. In the example below, we have paragraph, blockquote and under-ordered list wrapped within a <div>.

 <div> <p><strong>Paragraph 1:</strong>Tiramisu gummi bears faworki dragee. Faworki faworki dessert sweet. Souffle powder biscuit lemon drops topping wypas.</p> <blockquote> <p><strong>Blockquote</strong> Oat cake sugar plum tiramisu jelly cupcake dragee powder. Caramels pastry pie danish fruitcake bonbon chocolate cake bear claw.</p> </blockquote> <p><strong>Paragraph 2:</strong>Sweet icing applicake. Apple pie applicake bonbon cake danish cookie jujubes. Topping croissant tiramisu pie jelly-o pudding.</p> <p><strong>Paragraph 3:</strong> Oat cake pastry chocolate dessert brownie wafer candy. Caramels chocolate cake marzipan. Biscuit candy pudding dessert brownie dragee halvah donut gummi bears.</p> <ul> <li><strong>List 1:</strong> Cotton candy apple pie topping.</li> <li><strong>List 2:</strong> Biscuit gummi bears sweet</li> <li><strong>List 3:</strong> Jujubes fruitcake bear claw chocolate bar.</li> <li><strong>List 4:</strong> Tart carrot cake cookie marzipan pastry toffee.</li> <li><strong>List 5:</strong> Wafer tiramisu marzipan tart.</li> <li><strong>List 6:</strong> Halvah chocolate bar.</li> <li><strong>List 7:</strong> Toffee sugar plum.</li> <li><strong>List 8:</strong> Caramels pastry pie.</li> </ul> </div>

To select the last second paragraph from the above HTML structure, we can write the rules in this way.

 p:nth-last-of-type(2) { padding: 15px; background-color: #333; color: #fff; }

Unlike:nth-child or :nth-last-child which selects the element strictly on their sequence, the -of-type pseudo-class will also find the element upon their specified type. See the demo from the link below to see our example above in action.

View Demo

Recommended Reading: Understanding nth-child Pseudo-class Expression

:only-child

The :only-child is used to select the specified element that is the only child of its parent. Imagine, a parent who only has one child in the family. Similarly, in the following example, we only have one paragraph within a <div>.

 <div> <p>Tiramisu gummi bears faworki dragee. Faworki faworki dessert sweet. Souffle powder biscuit lemon drops topping wypas.</p> </div>

To target and add styles to this paragraph, we can write:

 p:only-child { padding: 15px; background-color: #333; color: #fff; }

However, when we have more child elements of any type within, this pseudo-class will not work, as the specified element is no longer the only child under its parent.

View Demo

:only-of-type

:only-of-type pseudo-class works similarly to :only-child. But apart from the sequence, it will also find the element from their type. The :only-of-type will target and add styles. Imagine a parent with 3 children consisting of two girls and one boy. We can target the boy with this pseudo-class, as he is the only boy in his family.

In the following example, we have two paragraph and one blockquote.

 <p><strong>Paragraph 1:</strong>Sweet icing applicake. Apple pie applicake bonbon cake danish cookie jujubes. Topping croissant tiramisu pie jelly-o pudding.</p> <blockquote><strong>Blockquote:</strong> Oat cake pastry chocolate dessert brownie wafer candy.</p></blockquote> <p><strong>Paragraph 2:</strong>Sweet icing applicake. Apple pie applicake bonbon cake danish cookie jujubes. Topping croissant tiramisu pie jelly-o pudding.</p>

To select the <blockquote> element among these paragraphs, we can write it in this way:

 blockquote:only-of-type { padding: 15px; background-color: #333; color: #fff; }

Click the demo below to see it in action.

View Demo

:empty

:empty specified element targets that are empty. In other words, this element has no content or child element, it has nothing, not even a space. In the following example, we have an empty paragraph within a <div>.

 <div> <p></p> </div>

To target the paragraph element upon this condition, we can write:

 p:empty { padding: 15px; background-color: #333; color: #fff; }

View Demo

:target

The :target pseudo-class is used to add styles to elements with fragment identifier. Fragment identifier is an extra string in the last part of URL that is started with a hash (#). It looks like the following http://www.domain.com/#fragmentid.

To apply styles with :target, we first need to assign a unique id or name attribute to the element, as follows.

 <div> <p id="target"><strong>Paragraph 1:</strong>Sweet icing applicake. Apple pie applicake bonbon cake danish cookie jujubes. Topping croissant tiramisu pie jelly-o pudding.</p> </div>

To select and apply styles when this paragraph is being targeted with a fragment identifier, probably with something like http://www.domain.com/#target, we can write the styles rule in this way.

 p:target { padding: 15px; background-color: #333; color: #fff; }

Paul Underwood has showed how to use this :target pseudo-class in real case in this post How To Create CSS-Based Content Accordion.

View Demo

:enabled & :disabled

:disabled is used to target elements that do not accept data input and, contrastly :enabled is used to target elements that accept data input. In the following example, we have two text input type, with one assigned with a disabled attribute.

 <input type="text" disabled="disabled" placeholder="disabled"> <input type="text" placeholder="enabled">

Then, we would like to turn the disabled input border color into red and green for another input.

 input:enabled { background-color: #fff; border: 2px solid #79be6a; } input:disabled { background-color: #f3f3f3; border: 2px solid #c33a36; }

Visit the demo page below to see this example in action.

View Demo

:checked

The last pseudo-class we will discuss is :checked. This pseudo-class will target <input> element when it is selected or checked. Thus, this pseudo-class only applies to radio input type and checkbox input type.

View Demo

Final Thought

We have covered a lot in this post. We hope that this would be a good reference for you to work with pseudo-classes. Lastly, you can download the demo source from the following link.