Ejemplos de selección con Pseudoclases

Pseudoclases CSS: first-child, last-child y nth-child

Dentro de CSS existen clases especiales a las cuales podemos denominar pseudoclases, estas nos
ayudaran a modificar el comportamiento de los elementos HTML a los que estén aplicados.

Las pseudoclases :first-child, lo que hace es seleccionar al primer elemento dentro de otro elemento,
o dicho de otro modo al primer elemento hijo de un elemento padre. Por ejemplo:

p {
font-size: 16px;
color: #B2B2B2;
background-color: #808080;
text-align: center;
}

p:first-child {
font-size: 20px;
color: white;
background-color: orange;
}

<div>
<p>Charmander</p>
<p>Bulbasaur</p>
<p>Squirtle</p>
<p>Pikachu</p>
</div>

Como se ve en el ejemplo, seleccionamos el primer elemento "p" contenido dentro del elemento
"div" y modificamos las propiedades que este tiene asignadas sin afectar al resto. La
pseudoclase :first-child puede ser utilizada con cualquier otro elemento HTML, no solamente con el
elemento "p" o "li" por poner ejemplos.

La pseudoclase :last-child funciona de manera similar que :first-child solo que esta selecciona al
último elemento dentro de un elemento padre o mejor dicho el último elemento hijo de un elemento
padre. Veamos el siguiente ejemplo para entenderlo mejor.

p {
font-size: 16px;
color: #B2B2B2;
background-color: #808080;
text-align: center;
}

p:last-child {
font-size: 20px;

1
 Ejemplos de selección con Pseudoclases

color: #A3A300;
background-color: yellow;
}

<div>
<p>Charmander</p>
<p>Bulbasaur</p>
<p>Squirtle</p>
<p>Pikachu</p>
</div>

La pseudoclase :nth-child(an+b) selecciona un o una serie de elementos hijos que se encuentran

dentro de un elemento padre, dentro de :nth-child(an+b) podemos establecer el número de
elemento que queremos seleccionar, por ejemplo:

p {
font-size: 16px;
color: #B2B2B2;
background-color: #808080;
text-align: center;
}

p:nth-child(2n) {
font-size: 20px;
color: white;
background-color: #2ecc71;
}

<div>
<p>Charmander</p>
<p>Bulbasaur</p>
<p>Squirtle</p>
<p>Pikachu</p>
</div>

Pero qué pasa si queremos modificar a los elementos pares o impares, para esto cambiaremos el
patrón de :nth-child(an+b) por :nth-child(2n) o podemos utilizar :nth-child(even) para seleccionar
elementos pares y :nth-child(2n+1) o :nth-child(odd) para elementos impares.

En los siguientes ejemplos se puede apreciar mejor lo antes mencionado.

p {
font-size: 16px;
color: #7f8c8d;
background-color: #95a5a6;
text-align: center;

2
 Ejemplos de selección con Pseudoclases

p:nth-child(2n) {
font-size: 20px;
color: #FFFFFF;
background-color: #3498db;
}

<div>
<p>Charmander</p>
<p>Bulbasaur</p>
<p>Squirtle</p>
<p>Pikachu</p>
</div>

p {
font-size: 16px;
color: #7f8c8d;
background-color: #95a5a6;
text-align: center;
}

p:nth-child(2n+1) {
font-size: 20px;
color: #FFFFFF;
background-color: #2ecc71;
}

<div>
<p>Charmander</p>
<p>Bulbasaur</p>
<p>Squirtle</p>
<p>Pikachu</p>
</div>

os valores de an+b, deben ser números enteros, el índice de un first-child es de 1 y las propiedades
establecidas en nth-child() se aplicarán a los hijos que estén dentro de “an+b” cuando n=1,2,3…

Por ejemplo si a=2 y b=0, las propiedades solo se aplicaran a los elementos con índice par (2,4,6…) y
los elementos con índice impar (1,3,5…) no se verán afectados por las propiedades establecidas.

Last-of-type

p {
font-size: 16px;

3
 Ejemplos de selección con Pseudoclases

color: #7f8c8d;
background-color: #95a5a6;
text-align: center;
}

p:last-of-type {
font-size: 20px;
color: #FFFFFF;
background-color: #2ecc71;
}

<div>
<p>Charmander</p>
<p>Bulbasaur</p>
<p>Squirtle</p>
<p>Pikachu</p>
</div>

Ojo cuando trabajamos elementos anidados, el selector universal (*) está implícito cuando no se
escribe un selector simple.

article :last-of-type {
background-color: blue;
}

<article>
<div>Este `div` es primero.</div>
<div>¡Este <span>'span' anidado es el último</span>!</div>
<div>¡Este <em>`em` anidado es el primero</em>, pero este <em>`em`
anidado es el último</em>!</div>
<b>¡Este `b` califica!</b>
<div>¡Este es el 'div' final!</div>
</article>

nth-of-type

/* Párrafos impares */
p:nth-of-type(2n+1) {
color: red;
}

/* Párrafos pares */
p:nth-of-type(2n) {
color: blue;
}

4
 Ejemplos de selección con Pseudoclases

/* Primer párrafo */
p:nth-of-type(1) {
font-weight: bold;
}
<div>
<div>Este elemento no se cuenta.</div>
<p>1er párrafo.</p>
<p>2do párrafo.</p>
<div>Este elemento no se cuenta.</div>
<p>3er párrafo.</p>
<p>4to párrafo.</p>
</div>

Otro ejemplo

<!DOCTYPE html>
<html>
<head>
<style>
p:nth-of-type(3n+0) {
background: red;
}
</style>
</head>
<body>

<p>The first paragraph.</p>

<p>The second paragraph.</p>
<div>esto es un div</div>
<div>esto es un div</div>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
<p>The fifth paragraph.</p>
<p>The sixth paragraph.</p>
<p>The seventh paragraph.</p>
<p>The eight paragraph.</p>
<p>The ninth paragraph.</p>

</body>
</html>