Teoría
Teoría

La pseudoclase :nth-of-type

La pseudoclase :nth-of-type funciona casi igual que :nth-child. La diferencia es que tiene en cuenta la etiqueta del elemento.

Puedes volver al ejemplo del quinto ejercicio para repasar las diferencias entre estos selectores.

Veamos otro ejemplo. Si usamos estos selectores en el ejercicio actual:

ul:nth-child(2) { }
ul:nth-of-type(2) { }

El primer selector seleccionará el segundo elemento hijo, siempre que sea un ul. En nuestro caso seleccionará la primera fila de cartas.

El segundo selector seleccionará el segundo ul entre los elementos hijos ul. En nuestro caso seleccionará la segunda fila de cartas.

La pseudoclase :nth-of-type también funciona con las palabras clave odd y even. El valor odd selecciona los elementos impares y even, los pares del tipo indicado.

La sintaxis de :nth-child se explica en el ejercicio La pseudoclase :nth-child del capítulo de introducción a los selectores.
Como lectura opcional en inglés, también puedes consultar este artículo sobre las diferencias entre :nth-child y :nth-of-type.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>La pseudoclase :nth-of-type</title> <link rel="stylesheet" href="course.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="paper"> <h1>¿Cómo se juega al solitario?</h1> <p>Como tú quieras.</p> </div> <ul class="cards"> <li class="ace heart"></li> <li class="king diamond"></li> <li class="queen club"></li> <li class="jack spade"></li> <li class="king club"></li> <li class="ace spade"></li> <li class="jack heart"></li> </ul> <ul class="cards"> <li class="jack diamond"></li> <li class="ace club"></li> <li class="king spade"></li> <li class="queen heart"></li> <li class="queen spade"></li> <li class="king heart"></li> <li class="ace diamond"></li> </ul> <ul class="cards"> <li class="queen spade"></li> <li class="king heart"></li> <li class="king club"></li> <li class="ace spade"></li> <li class="jack heart"></li> <li class="queen diamond"></li> <li class="ace diamond"></li> </ul> <ul class="cards"> <li class="queen spade"></li> <li class="ace spade"></li> <li class="jack heart"></li> <li class="ace spade"></li> <li class="ace heart"></li> <li class="queen diamond"></li> <li class="ace diamond"></li> </ul> </body> </html>

CSS

ObjetivosRealizado

Asigna el color de fondo #ff3300 a todas las cartas de las filas pares.
Asigna el color de fondo #339933 a la tercera carta de la tercera fila.
Asigna el color de fondo #0099ff a las cartas impares de la primera fila.