El selector universal está marcado con un asterisco ( *
) y sirve como base para otros selectores. Selecciona todos los elementos independientemente de su tipo. Por ejemplo, crear una regla para el selector que agrega un fondo rojo a un elemento agregará un fondo rojo a cada elemento de la página:
{
background-color: red;
}
El selector universal se usa a menudo en combinación con otros selectores, lo que nos permite seleccionar todos los elementos dentro de otro elemento.
Los selectores de tipo de elemento seleccionan elementos... ¡por su tipo específico, por supuesto! Para utilizar este selector, escriba el nombre del elemento sin ninguna sintaxis adicional. Por ejemplo, para aplicar un estilo con texto negro alineado a la izquierda a todos los <h1>
encabezados de la página:
h1 {
text-align: left;
color: black;
}
Este estilo solo se aplicará a los <h1>
y no afectará a otros títulos ni al cuerpo del texto.
Los selectores de clase encuentran elementos con la clase específica establecida por el atributo de clase HTML. Un selector de clase está precedido por un punto ( .
). Por ejemplo, el selector de todos los elementos del centro de clases se vería así: . ****.center
El selector de clase es el tipo de selector más utilizado debido a su flexibilidad: puede agregar la misma clase a diferentes elementos o varias clases a un elemento.
La combinación de selectores de tipo de elemento con selectores de clase le permite seleccionar elementos de un tipo específico con una clase determinada. Por ejemplo, para seleccionar todos los <h1>
con el centro de la clase, use el selector . ****h1.center