Saltar al contenido principal

Selectores

A la hora de aplicar estilos a nuestros elementos HTML necesitamos un mecanismo que permita identificar sobre cuál o cuáles de estos elementos queremos actuar. Para ello se utilizan los selectores, estos permiten identificar a qué elementos de nuestro código HTML vamos a aplicar el estilo definido. Existe diferentes selectores, a continuación veremos los más importantes.

Selector universal

El selector universal (*) sirve para seleccionar todos los elementos de la página. Se aplican los estilos a todos los elementos.

* {
margin: 10px;
padding: 5px;
}

Selectores de etiqueta

En este caso, los estilos se aplican solo a la etiqueta.

Por ejemplo, si queremos aplicar estilos a los párrafos:

p { 
text-align: center;
}

En este ejemplo, los párrafos serán alineados al centro.

Si queremos ajustar los mismos estilos a dos etiquetas diferentes podemos ponerlos separados por comas.

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

En este ejemplo, tanto los párrafos como los encabezados de tipo 1 y 2 serán alineados al centro.