CSS - Selectores, especificidad y metodología (I)

Selectores

Los selectores definen sobre qué elementos se aplicará un conjunto de reglas CSS. Se dividen en diferentes categorías y podemos utilizar muchísimos más que hace unos años

Referidos a etiquetas / tipo

html {}
body {}
input {}
datalist {}
article {}
section {}

...etc ...etc

Selectores por clase

.noticia {}
.titulo {}

Selectores por id

Sólo uno por documento.

#cabecera {}
#pie {}

Selector universal

 * {} 

Selector de atributos

[attr] {} // tiene el atributo
[attr=value] {} // es igual a value
[attr*=value] {} // contiene value
[attr^=value] {} // comienza con value
[attr$=value] {} // terimina con value

// No los vais a usar seguramente pero ...
[attr~=value] {} // Raro, selecciona los elementos cuyo atributo
                 // attr tenga por valor una lista de palabras
                 // separadas por espacios, una de las cuales sea value.
[attr|=value] {} // extraño, elementos cuyo atributo attr 
                 // tenga exactamente el valor value o
                 // empiece por value seguido de un guión -,
                 // para idiomas

Seleccionando familia

.clasePadre .claseDescendiente {} // Nesting
.clasePadre > .claseHijaDirecta {}
.clasePadre + .claseHijaDirecta {} // Justo el siguiente elemento
.clasePrecedente ~ .claseAdyacente {} // Sólo hacia adelante
.clasepadre:has(.claseHija) { } // Experimental