Selectores CSS

Selector CSS

El selector de elementos CSS selecciona elementos basados en el nombre del elemento. Tu puedes seleccionar todos los elementos <p> de una página como en el siguiente ejemplo, y todos los elementos <p> serán centrados y con texto en color rojo:

p {
   text-align: center;
   color: red;
}

El selector CSS para identificadores

El selector id usa el atributo id de un elemento HTML para seleccionar a un elemento en específico. Dado que un id debe ser único dentro de una página, por lo que el selector de id se utiliza para seleccionar a un único elemento. Para seleccionar un elemento con un id en específico, escriba un caracter # (gato) seguido por el id del elemento.

La regla de estilo a continuación aplicará a un elemento HTML con un id igual a "parrafo1":

#parrafo1 {
   text-align: center;
   color: red;
}

Nota: No debes iniciar un identificador con un número.

El selector CSS para clases

El selector CSS de clases selecciona a elementos HTML con una clase específica en este atributo. Para seleccionar elementos con una clase específica, escribe un caracter de punto (.) seguido por el nombre de la clase.

En el siguiente ejemplo todos los elementos con la clase "parrafo2" aplicara el texto centrado y en color rojo.

.parrafo2 {
   text-align: center;
   color: red;
}

También puedes definir que solo específicos elementos HTML serán afectados por una clase.

En el siguiente ejemplo todos los elemento <p> con la clase "parrafo2" serán alineados al centro y texto en rojo.

p.parrafo2 {
   text-align: center;
   color: red;
}

Nota: No debes iniciar una clase con un número.

Agrupación de Selectores

Si tienes elementos con la misma definición de estilos como estos:

h1 {
   text-align: center;
   color: red;
}
h2 {
   text-align: center;
   color: red;
}
h3 {
   text-align: center;
   color: red;
}

Puedes agrupar los selectores para reducir al mínimo el código. Solo debes agruparlos en una sola línea separados por una coma cada uno.

En el siguiente ejemplo hemos agrupado los selectores del ejemplo anterior:

h1, h2, p {
   text-align: center;
   color: red;
}