CSS3 pseudo-classes to select elements

A pseudo-class is a CSS selector that helps us to select DOM elements taking into account their state instead of their information. Some of the most used pseudo-classes are :hover, :active or :focus. CSS3 brings some pseudo-classes that help us to select elements taking into account their position in the DOM tree. In this tutorial I’ll cover some of them.

:first-child pseudo-class

This pseudo-class allows us to select the first element in a container. To understand it better, let’s check the next codes and the final result:

HTML code

<div id="container">

	<div class="row">
		<div class="box">row 1 | column 1</div>
		<div class="box">row 1 | column 2</div>  
	</div>

	<div class="row">
		<div class="box">row 2 | column 1</div>
		<div class="box">row 2 | column 2</div>
		<div class="box">row 2 | column 3</div>
	</div>

	<div class="row">
		<div class="box">row 3 | column 1</div>
		<div class="box">row 3 | column 2</div>
		<div class="box">row 3 | column 3</div>
		<div class="box">row 3 | column 4</div>
	</div>

</div>

CSS code

.box:first-child {
	
	background: #FFF;
	color: #232b2b;
	
}

Result

As you can see, the style has been applied to the first element with the box class in each row.

:last-child pseudo-class

This pseudo-class is similar to the previous one, but in this case, this one allows us to select the last element in a container. Using the same previous HTML code, let’s take a look at the next CSS code and the final result:

CSS code

.box:last-child {
	
	background: #FFF;
	color: #232b2b;
	
}

Result

In this case, the last element with the box class in each row has been selected.

:nth-child pseudo-class

This pseudo-class allows us to select one or more elements taking into account their position in the container. It needs a parameter that can be the keywords odd or even, an integer or a formula. I’ll explain each one of these parameters and the next HTML code will be used for all of them:

HTML code

<div id="container">

	<div class="box">element 1</div>
	<div class="box">element 2</div>  
	<div class="box">element 3</div>
	<div class="box">element 4</div>
	<div class="box">element 5</div>
	<div class="box">element 6</div>
	<div class="box">element 7</div>
	<div class="box">element 8</div>
	<div class="box">element 9</div>
	<div class="box">element 10</div>
	<div class="box">element 11</div>
	<div class="box">element 12</div>

</div>

Using the “odd” keyword

With this keyword, it is possible to select the odd elements in a container. It will select the 1st, 3rd, 5th, 7th and so on elements:

CSS code

.box:nth-child(odd) {
	
	background: #FFF;
	color: #232b2b;
	
}

Result

Using the “even” keyword

With this keyword, it is possible to select the even elements in a container. It will select the 2nd, 4th, 6th, 8th and so on elements:

CSS code

.box:nth-child(even) {
	
	background: #FFF;
	color: #232b2b;
	
}

Result

Using an integer

If an integer is used as a parameter of this pseudo-class it will select the element in that position. Let’s take a look at the next CSS code and the result:

Código CSS

.box:nth-child(6) {
	
	background: #FFF;
	color: #232b2b;
	
}

Result

Using a formula

If a formula is used, it is possible to select multiple elements that match the criteria specified in it. The formula must follow the pattern an +/- b, where a corresponds to an integer, n is a variable character to indicate to the pseudo-class that it is a formula, and b corresponds to an integer and it should be used only if the operators + or – have been used previously.

The n variable character represents integers starting in 0. For example, if the formula 4n is used, the selected elements will be the next ones:

Formula	Element to select
4 × 0 = 0	none
4 × 1 = 4	4
4 × 2 = 8	8
4 × 3 = 12	12
…	…

The first generated selection will not be used because the indexes start in 1 and the result has been 0. As the HTML code has 12 elements, the elements 4th, 8th, and 12th will be selected. Let’s take a look at the CSS code and the result of this formula:

CSS code

.box:nth-child(4n) {
	
	background: #FFF;
	color: #232b2b;
	
}

Result

Let’s use an operator in the formula. If the formula 4n + 2 is used, the selected elements will be the next ones:

Formula	Element to select
4 × 0 + 2 = 0 + 2 = 2	2
4 × 1 + 2 = 4 + 2 = 6	6
4 × 2 + 2 = 8 + 2 = 10	10
…	…

As the HTML has only 12 elements, the 2nd, 6th, and 10th elements will be selected. Let’s take a look at the CSS code and the result of this formula:

CSS code

.box:nth-child(4n + 2) {
	
	background: #FFF;
	color: #232b2b;
	
}

Result

Another case is if the multiplier variable (a) is omitted. For example, if the formula n + 7 is used, the selected elements will be the next ones:

Formula	Element to select
0 + 7 = 7	7
1 + 7 = 8	8
2 + 7 = 9	9
3 + 7 = 10	10
4 + 7	11
5 + 7 = 12	12
…	…

So, this formula will select the elements with a position equal or greater to 7, that is to say, the 7th, 8th, 9th, 10th, 11th, and 12th elements will be selected. Let’s take a look at the CSS code and the result of this formula:

CSS code

.box:nth-child(n + 7) {
	
	background: #FFF;
	color: #232b2b;
	
}

Result

What would happen if the variable n is used with a negative sign? If the formula -n + 6 is used, the selected elements will be the next ones:

Formula	Element to select
-0 + 6 = 6 – 0 = 6	6
-1 + 6 = 6 – 1 = 5	5
-2 + 6 = 6 – 2 = 4	4
-3 + 6 = 6 – 3 = 3	3
-4 + 6 = 6 – 4 = 2	2
-5 + 6 = 6 – 5 = 1	1
…	…

So, this formula will select the elements equal or lesser to 6, that is to say, the 6th, 5th, 4th, 3rd, 2nd, and 1st elements will be selected. Let’s take a look at the CSS code and the result of this formula:

CSS code

.box:nth-child(-n + 6) {
	
	background: #FFF;
	color: #232b2b;
	
}

Result

Let’s go farther. It is possible to join two pseudo-classes to select a more specific range of elements. For example, the formulas n + 3 and -n + 10 together, will select all the elements equal or greater to 3 and equal or lesser to 10. Let’s take a look at the CSS code and the result of these two formulas joined:

CSS code

.box:nth-child(n + 3):nth-child(-n + 10) {
	
	background: #FFF;
	color: #232b2b;
	
}

Result

:nth-last-child pseudo class

This pseudo-class is similar to nth-child. Both use the same system to select elements (keywords, integers or formulas). The only difference is that this one starts to select elements in reverse direction. For example, if the element to select is 1, the last element will be selected, if it is 2, the penultimate element will be selected and so on. Let’s take a look at an example using one of the previous formulas. If the formula 4n is used, the selected elements will be the next ones:

Formula	Element to select
4 × 0 = 0	none
4 × 1 = 4	9
4 × 2 = 8	5
4 × 3 = 12	1
…	…

So, this formula will select the 9th, 5th, and 1st elements. Let’s take a look at the CSS code and the result of this formula:

CSS code

.box:nth-last-child(4n) {
	
	background: #FFF;
	color: #232b2b;
	
}

Result

:nth-of-type pseudo class

This pseudo-class works similar to :nth-child but with a difference. While :nth-child selects elements without taking into account their type, :nth-of-type takes into account the type of element to select. Using the next HTML code, let’s take a look at the CSS code using the formula 2n and the result of it:

HTML code

<div id="container">
	<div class="type1">div 1</div>
	<section class="type2">section 1</section>  
	<div class="type1">div 2</div>
	<section class="type2">section 2</section>
	<div class="type1">div 3</div>
	<section class="type2">section 3</section>
	<div class="type1">div 4</div>
	<section class="type2">section 4</section>
	<div class="type1">div 5</div>
	<section class="type2">section 5</section>
	<div class="type1">div 6</div>
	<section class="type2">section 6</section>
</div>

CSS code

section:nth-of-type(2n) {
	
	background: #FFF;
	color: #232b2b;
	
}

Result

As you can see, using the formula 2n, the 2nd, 4th, and 6th section elements have been selected no matter if they are actually located in the DOM tree in the positions 4th, 8th, and 12th. This happens because the pseudo-class :nth-of-type only takes into account the type of element in which the selector is applied.

:nth-last-of-type pseudo-class

This pseudo-class is equal to the previous one, but as :nth-last-child, it selects the elements in reverse order. For example, using the same HTML and the same formula that we used in the previous example, this will be the result:

CSS code

#container div:nth-last-of-type(2n) {
	
	background: #FFF;
	color: #232b2b;
	
}

Result

As you have seen, the use of pseudo-classes has infinite possibilities. I hope that this tutorial has been helpful to you.