Teoría
Teoría

La pseudoclase :first-of-type

La pseudoclase :first-of-type se parece mucho a :first-child. Selecciona el primer elemento hijo de un padre, pero teniendo en cuenta el tipo de elemento, es decir, su etiqueta.

Por ejemplo, en este ejercicio hay un bloque de texto antes de las listas de cartas. Las listas y el bloque de texto tienen el mismo padre: body.

<body>
  <div class="paper"> … </div>
  <ul class="cards"> … </ul>
  <ul class="cards"> … </ul>
</body>

Comparemos estas dos reglas:

ul:first-child {
  background-color: #ffffee;
}

ul:first-of-type {
  background-color: #ffffee;
}

El primer selector selecciona el primer elemento hijo de un padre, siempre que sea un ul. En nuestro caso no seleccionará nada, porque el primer hijo de body es un div.

El segundo selector selecciona el primer ul entre los elementos hijos ul de su padre. En nuestro caso seleccionará la primera fila de cartas.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>La pseudoclase :first-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

/* Para colorear las filas completas, ten en cuenta la prioridad de los selectores o elimina los selectores después de colorear cada fila. */

ObjetivosRealizado

Asigna el color de fondo #ff3300 a la primera carta de cada fila.
Después, asigna el color de fondo #339933 a todas las cartas de la primera fila.
Por último, asigna el color de fondo #0099ff a la carta en la intersección de la fila y la columna coloreadas.