Vimos algunos de los selectores que se pueden usar en CSS:
Selector de Etiqueta
/* selecciona todos los elementos <p> del documento html */
p {
/**/
}
Selector de Clase
/* selecciona todos los elementos del documento html con la clase "elemento" */
.elemento {
/**/
}
Selector de ID
/* selecciona todos los elementos con el id "elemento" */
#elemento {
/**/
}
Selector Universal
/* selecciona todos los elementos */
* {
/**/
}
Podemos unir varios selectores para combinar su funcionamiento. Por ejemplo, para seleccionar todos los párrafos que tengan la clase “resaltado”, podemos hacer:
/* selecciona todos los párrafos que tengan la case "resaltado" */
p.resaltado {
/**/
}
Si unimos con un espacio varios selectores, estamos pidiendo que exista una relación de parentezco entre los elementos. Podemos, por ejemplo, seleccionar todos los párrafos <p>
que sean descendientes de algún elemento <div>
.
/* selecciona todos los párrafos que tengan algun ancestro div */
div p {
/**/
}
Para más detalles se puede consultar la documentación de Combinadores de CSS en MDN
Existen selectores que trabajan sobre otros selectores, para funcionar en casos y estados específicos.
Vimos algunos ejemplos para consultar por el primer y el último elemento, pero hay muchos más