Selectores de CSS

Selectores de CSS

Los selectores CSS se utilizan para "encontrar" (o seleccionar) los elementos HTML que se van a establecer estilos.

Podemos dividir los selectores CSS en cinco categorías:

Esta página explicará los selectores CSS más básicos.

Selector de elemento CSS

El selector de elemento selecciona los elementos HTML según el nombre del elemento.

Instancia

En este caso, todos los elementos <p> en la página se alinearán al centro y tendrán un color de texto rojo:

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

Intente hacerlo usted mismo

Selector de id CSS

El selector de id utiliza la propiedad id del elemento HTML para seleccionar un elemento específico.

El id de un elemento es único en la página, por lo que el selector de id se utiliza para seleccionar un elemento único!

Para seleccionar un elemento con un id específico, escriba un carácter de guión (#) seguido del id del elemento.

Instancia

Esta regla CSS se aplicará al elemento HTML con id="para1":

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

Intente hacerlo usted mismo

Atención:El nombre de id no puede comenzar con un número.

Selector de clase CSS

El selector de clase selecciona los elementos HTML con una propiedad de clase específica.

Para seleccionar un elemento con una clase específica, escriba un carácter de punto (.) seguido del nombre de la clase.

Instancia

En este ejemplo, todos los elementos HTML con la clase "center" serán rojos y alineados al centro:

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

Intente hacerlo usted mismo

También puede especificar que solo ciertos elementos HTML se vean afectados por la clase.

Instancia

En este ejemplo, solo los elementos <p> con la clase "center" se alinearán al centro:

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

Intente hacerlo usted mismo

Los elementos HTML también pueden referirse a múltiples clases.

Instancia

En este ejemplo, el elemento <p> se configurará según las clases "center" y "large":

<p class="center large">Este párrafo hace referencia a dos clases.</p>

Intente hacerlo usted mismo

Atención:¡Los nombres de clase no pueden comenzar con un número!

Selector universal CSS

El selector universal (*) selecciona todos los elementos HTML en la página.

Instancia

Las siguientes reglas CSS afectarán a cada elemento HTML en la página:

* {
  text-align: center;
  color: blue;
}

Intente hacerlo usted mismo

Selector de grupo CSS

Los selectores de grupo CSS seleccionan todos los elementos HTML con la misma definición de estilo.

Vea el siguiente código CSS (los elementos h1, h2 y p tienen la misma definición de estilo):

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

Es mejor dividir los selectores en grupos para reducir al máximo el código.

Para dividir los selectores en grupos, utilice comas para separar cada selector.

Instancia

En este ejemplo, dividimos los selectores anteriores en grupos de código:

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

Intente hacerlo usted mismo

Todos los selectores CSS simples

Selector Ejemplo Descripción del ejemplo
.class .intro Seleccione todos los elementos con la clase "intro".
#id #firstname Seleccione el elemento con id="firstname".
* * Seleccione todos los elementos.
elemento p Seleccione todos los elementos <p>.
elemento,elemento,.. div, p Seleccione todos los elementos <div> y todos los elementos <p>.

Lectura adicional

Libro de texto adicional:Selector de elemento CSS

Libro de texto adicional:Grupo de selectores CSS

Libro de texto adicional:Detalles del selector de clase CSS

Libro de texto adicional:Detalles del selector ID CSS

Libro de texto adicional:Detalles del selector de atributo CSS

Libro de texto adicional:Selector de descendiente CSS

Libro de texto adicional:Selector de elemento hijo CSS

Libro de texto adicional:Selector de hermano adyacente CSS