Teoría
Teoría

El selector de hermanos posteriores

Ya vimos los selectores de hermanos adyacentes, que se escriben como selector1 + selector2.

Existe un selector parecido: selector1 ~ selector2. Los estilos se aplican a un elemento que coincida con selector2 solo si antes de él hay un elemento que coincida con selector1. Ambos deben tener el mismo padre.

La diferencia con el selector de hermanos adyacentes es que puede haber otros elementos entre los que coinciden con selector1 y selector2. Por eso llamaremos a selector1 ~ selector2 selector de hermanos posteriores.

Comparemos:

<ul class="cards">
  <li class="king diamond">
  <li class="queen heart">
  <li class="jack spade">
  <li class="ace heart">
  <li class="king club">
</ul>

.queen.heart + li {
  background-color: #ffff99;
}

.king.diamond ~ li {
  background-color: #99ddff;
}

En el primer caso se coloreará una sola carta: la que está justo después de la reina de corazones, es decir, la jota de picas.

En el segundo caso se colorearán todas las cartas que están después del rey de diamantes: la reina de corazones, la jota de picas, el as de corazones y el rey de tréboles.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>El selector de hermanos posteriores</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> </body> </html>

CSS

ObjetivosRealizado

Asigna el color de fondo #ff3300 a las cartas que estén justo después de un rey .king.
Asigna el color de fondo #339933 a los ases .ace que estén en cualquier posición después de una jota de corazones .heart.jack.
Asigna el color de fondo #0099ff a las jotas de corazones .heart.jack que estén en cualquier posición después de un rey de tréboles .club.king.