Posiblemente este ha sido siempre mi tendón de Aquiles a la hora de conseguir entender, interpretar o escribir propiedades CSS.
Voy a tratar de esquematizar el funcionamiento de los selectores de la forma más sencilla posible e incluir información adicional al respecto.
Selectores básicos
Selector universal
El selector universal es el símbolo de asterisco * y se aplica a todos los elementos de forma universal.
* {
color: #181818;
}
Selector de tipo
Type selector, es el selector de elemento, que hace referencia al nombre de la etiqueta
div {
/* propiedades para los div */
}
p {
/* Propiedades para los párrafos */
}
Selector de clase
Class selector o selector de clase, se indican con un punto delante de la clase
.titulo {
/* propiedades aplicables a la clase título */
}
Selector ID
ID Selector, selector de id o de nombre, son similares a las clases:
#cabecera {
/* propiedades aplicables a la id cabecera */
}
Selector de grupo
Group selector o selector de grupo, permite asignar las mismas propiedades a varias clases:
h1, h2 {
color: blue;
}
.titulo1, .titulo2{
color: blue;
}
/* Permite incluso combinar distintos tipos*/
#titulo1, .titulo2{
color: blue;
}
Selectores encadenados
Chaining selectors, selectores encadenados o combinados, se aplican a elementos que combinan a la vez varios selectores, ya sean clases o id’s.
/* dos o mas clases*/
.grupo.principal{
color: blue;
}
/* clase + id */
.grupo#titulo2{
color: red;
}
Combinador descendente
Permite la combinacion de cualquier hijo, siempre que lo sea de un determinado padre.
Se aplica a un elemento de clase .hijo siempre que este anidado en un elemento de clase .padre
El anidamiento puede ser de más de dos elementos.
.padre .hijo {
color: blue;
}
Selectores Avanzados
Combinaciones padre, hijo y hermano
Aquí encontramos tres posibilidades
- Combinación hijo:
> - Combinación adyacente o hermano:
+ - Combinación general hermano:
~
See the Pen
CSS Selectors by Juanjo Carballo (@crivinoiax)
on CodePen.
Pseudo-selectores
Al hablar de pseudo-selectores, hay que distinguir entre pseudo-clases cuyo prefijo es el doble punto <:> para hacer referencia a elementos que ya existen en el código HTML y pseudo-elementos precedidos por dos dobles puntos <::>, haciendo referencia a elementos que no existen en el marcado HTML como se detalla a continuación:
Pseudo-classes
Es una forma de referenciar elementos HTML de diferentes maneras, por la posición dentro del código o por su estructura, e incluso por el estado o como se interactúa con el elemento.
Un interesante artículo que aclara aspectos relacionados con este tema: Specifics on CSS Specificity | CSS-Tricks – CSS-Tricks
Dynamic and User Action Pseudo-classes
:focus-> Elemento que tiene el foco en el momento actual, o que está seleccionado.:hover-> Elemento que se encuentra bajo el puntero del ratón.:active-> Elemento que está siendo clickado por el ratón.:visited-> Elemento que ya ha sido clickado.
Structural Pseudo-classes
- :root -> representa el elemento más alto en el arbol de elementos, un elemento sin padre. Similar al elemento <html> pero con algunas diferencias.
- :first-child – :last-child -> Primer y último elemento hijo.
- :empty -> Elemento sin hijos.
- :only-child -> Elemento que no tiene hermanos.
- :nth-child -> es una pseudo-clase flesible que admite distintas posibilidades:
.myList:nth-child(5) {/* Selecciona el quinto elemento de la clase myList */}
.myList:nth-child(3n) { /* Selecciona cada tercer elemento de la clase myList */}
.myList:nth-child(3n + 3) { /* Selecciona cada tercer elemento de la clase myList, empezando por el tercero */}
.myList:nth-child(even) {/* Selecciona cada elemento par en la clase myList */}
Pseudo-elements
Similares a las pseudo-clases, pero con un ámbito más abstracto, entre otros, algunos de los más comúnmente utilizados.
::marker-> permite personalizar el estilo de los elementos<li>, viñetas o números.::first-lettero::first-line-> permiten personalizar la primera letra o línea de un texto respectivamente.::selection-> permiten aplicar estilo al resaltado de texto, cuando es seleccionado por el usuario.::beforeo::after-> permiten añadir elementos extra mediante html, antes o después de un determinado elemento.
En el siguiente enlace, se puede acceder a una lista completa de pseudo-elementos: Pseudo-elements – CSS: Cascading Style Sheets | MDN (mozilla.org)