Teoría
Teoría

Combinaciones con :not

El selector de negación :not, como cualquier otro selector, se puede combinar con otros. Por ejemplo:

li:not(:first-child):not(:last-child) { }

Selecciona todas las etiquetas <li> que NO sean ni el primer ni el último elemento hijo de su padre.

Puedes combinar tantos selectores como necesites.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Combinaciones con :not</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="king diamond"></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 la primera carta de cada fila, excepto si es de picas .spade.
Asigna el color de fondo #339933 a la carta central de cada fila, siempre que no sea un as .ace ni de diamantes .diamond.
Asigna el color de fondo #0099ff a los corazones .heart que no estén en la primera posición de su fila y que no sean ni reinas .queen ni jotas .jack.