Web Design: A Guide To CSS3 Pseudo-Classes
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 havecovered 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>
.
: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.
: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.
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.
: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.
: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;
- }
: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.
: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 disable
d 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.
: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 andcheckbox
input type.