Teoría
Teoría

Combinación de selectores

A veces necesitamos seleccionar elementos que cumplan varias condiciones a la vez.

En CSS hay una forma de escribir selectores que equivale a la operación lógica «Y». Los selectores que se aplican al mismo elemento se escriben sin espacios:

.class1.class2 { }

Los estilos se aplicarán a todos los elementos que tengan tanto la clase class1 como la clase class2. Ya sabes que un elemento HTML puede tener varias clases a la vez. Por ejemplo:

<div class="class1 class2">Bloque con dos clases</div>

Del mismo modo, puedes combinar cualquier cantidad de selectores distintos. Cuantos más combines, más condiciones deberá cumplir un elemento para que se le apliquen los estilos.

En programación, una operación similar suele representarse con &&. Por ejemplo:

if (firstSelector && secondSelector) { ... }

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Combinación de selectores</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="ace diamond"></li> <li class="queen diamond"></li> </ul> <ul class="cards"> <li class="jack heart"></li> <li class="queen spade"></li> <li class="ace diamond"></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 reinas .queen de picas .spade.
Asigna el color de fondo #339933 a los corazones .heart que estén en la primera posición de su fila.
Asigna el color de fondo #0099ff a los ases .ace de diamantes .diamond que estén en la última posición de su fila.