Clase (class="")
El selector de clase nos permite asignar un nombre de clase a todos los elementos que queramos para editarles un parámetro dentro de la etiqueta style.
Este párrafo,
este otro
y este último
llevan asignada la misma clase y, de esta manera, puedo editarles el mismo parámetro a los tres a la vez.
Identificador (id="")
El funcionamiento es el mismo que el del selector de clase, solo que no se puede asignar el mismo identificador dos veces, por lo que solo nos sirve para editar los parámetros de un elemento.
El "no" de arriba lleva asignado un identificador dentro de su etiqueta strong, lo que me permite cambiarle parámetros como el color de fondo.
Todos los elementos (*)
El selector de todos los elementos sirve para asignar el mismo parámetro a todos los elementos de la página. Es más útil si lo utilizas solo para los elementos contenidos en otro elemento, pero eso se explicará en el apartado 5.
He utilizado ese selector para cambiar el color de toda la página, aunque también se puede hacer editando la etiqueta body.
Varios elementos (p, em, h1, h2)
El selector de varios elementos se usa para asignar el mismo parámetro a varios tipos de elementos.
He asignado con este selector al h1 y a todos los h2 la fuente de letra Verdana.
Elementos contenidos en otros elementos (ol li)
El selector de elementos contenidos en otros elementos es útil cuando tenemos muchos elementos dentro de distintas categorías y solo queremos editar los de una categoría específica.
- Todos los apartados
- de esta lista
- tienen fondo violeta
porque solo los elementos li dentro de una lista desordenada tienen este atributo.
Sobrevuelo (p:hover)
El selector de sobrevuelo nos permite cambiar los parámetros de cualquier elemento solo si el ratón se encuentra encima del elemento.
Esta imagen, por ejemplo, se invierte cuando pasamos el ratón por encima gracias al parámetro transform: scaleX.