The nth-child pseudo-class in CSS

The nth-child CSS pseudo-class allows you to select elements within a list of consecutive or non-consecutive tags; this pseudo-class uses a mathematical formula to determine the order. For example, :nth-child(2n) selects all elements that are the second, fourth, sixth, and so on, children of their parent. Numbers can also be used with an additional formula to select specific elements, such as :nth-child(4n + 1) to select the first element and every fourth element after that. The pseudo-class :nth-child(); it can be used to select any of the DOM elements such as containers (div), lists, paragraphs, etc, that are found throughout the document, all you need to specify is the value of 'n'; Let's look at a series of examples below to understand how the nth-child pseudo-class works in CSS.

The nth-child pseudo-class in CSS to select two elements

For the following list:

<ul class="nth_numerica">
  <li>Primero</li>
  <li>Segundo</li>
  <li>Tercero</li>
  <li>Cuarto</li>
  <li>Quinto</li>
  <li>Sexto</li>
  <li>Séptimo</li>
</ul>

We will apply the following CSS rule using the nth-child CSS pseudo-class to change the background color to dark gray for the first and third elements:

ul.nth_numerica li:nth-child(1), ul.nth_numerica li:nth-child(3) {    background: #999; }

Applying the previous rule we obtain the following result:

What has happened?

We simply define numerical values to 'n', to indicate the positions of the elements that we want to select to apply the previous rule; for this example 'n' had the values of one (nth-child(1)) and three (nth-child(1)) respectively.

The nth-child pseudo-class in CSS to select odd elements

What if you want something a bit more generic, that is, if you want to apply certain rules to the odd elements starting to count from one, for example to the elements 1,3,5,7...n and without selecting one by one? The elements.

For the following list:

<ul class="nth_formula">
<li>Primero</li>
<li>Segundo</li>
<li>Tercero</li>
<li>Cuarto</li>
<li>Quinto</li>
<li>Sexto</li>
<li>Séptimo</li>
<li>Octavo</li>
<li>Noveno</li>
<li>Décimo</li>
<li>Undécimo</li>
<li>Duodécimo</li>
<li>Decimotercero</li>
<li>Decimoquinto</li>
<li>Decimosexto</li>
<li>Decimoséptimo</li>
</ul>

We will apply the following CSS rule:

ul.nth_formula li:nth-child(2n+1) {    background: #999; }

As a result we will have:

What has happened?

The formula 2n+1 (where for this example x=2 and k=1) is equivalent in some programming language to:

for(i = k; i < n; i+x){}

The nth-child pseudo-class in CSS and the odd and even values

Let's see one last example, a little more interesting and widely used; for the following table:

<table class="alternar">
	<tr>
		<td>Celda 1 1<td>
		<td>Celda 1 2<td>
	</tr>
	<tr>
		<td>Celda 2 1<td>
		<td>Celda 2 2<td>
	</tr>
	<tr>
		<td>Celda 3 1<td>
		<td>Celda 3 2<td>
	</tr>
</table>

We will apply the following rules:

table.alternar tr:nth-child(odd) {    background: #999; } table.alternar tr:nth-child(even) {    background: #CCC; }

They also allow you to change the background color of any element, in this case, of each one of the cells.

The result is as follows:

The two words tell us to which elements of the DOM this rule is going to be applied; for the odd elements the background color is #999 and for the even elements it is #CCC.