Teoría
Teoría

La pseudoclase :nth-last-of-type

Seguro que ya te imaginas cómo funciona :nth-last-of-type.

Selecciona los elementos según su posición, contando desde el final y teniendo en cuenta su etiqueta.

Por ejemplo:

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

Cuando el conjunto de elementos es pequeño, resulta fácil sustituir una de estas pseudoclases por otra: :nth-child, :nth-of-type, :nth-last-child y :nth-last-of-type.

En estructuras más complejas, algunas suelen resultar más cómodas que otras. Por ejemplo, cuando necesitas seleccionar el penúltimo elemento, pero la cantidad de elementos de la lista va cambiando.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>La pseudoclase :nth-last-of-type</title> <link rel="stylesheet" href="course.css"> <link rel="stylesheet" href="style.css"> </head> <body> <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> <div class="paper"> <h1>¿Cómo se juega al solitario?</h1> <p>Como tú quieras.</p> </div> </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 todas las cartas de la penúltima fila.
Después, asigna el color de fondo #339933 a la penúltima carta de cada fila.
Por último, asigna el color de fondo #0099ff a la carta en la intersección.