En artículos anteriores hemos visto qué es CSS y su sintaxis y ahora vamos a detallar la clasificación de selectores y selectores simples en CSS.
A grandes rasgos tienes que comprender que los selectores se usan para buscar o seleccionar el elemento HTML al que se quiere aplicar el estilo ahorrando tiempo y lineas de código al desarrollador.
Clasificación de Selectores
Podemos dividir los selectores en los siguientes bloques:
- Selectores simples (este articulo)
- Selectores combinados
- Selectores de pseudo clase
- Selectores de pseudo elemento
- Selectores de atributo
Selectores simples
Selector universal
Este selector es poco usado ya que aplica un mismo estilo a todos los elementos de la pagina. Su utilización es muy sencilla, en el siguiente ejemplo puedes comprobar como se elimina el margen a todos los elementos de la pagina.
* {
margin: 0;
}Selectores de elementos
Los selectores de elementos seleccionan elementos HTML en función de su nombre del elemento. En el siguiente ejemplo puedes observar cómo le aplicamos el color blanco a un párrafo y el color rojo a todos los textos de encabezado h1.
p {
color: white;
}
h1 {
color: red;
}Selectores de ID
Los selectores de ID utilizan el atributo ID del elemento HTML. Debido a que en una página HTML el id del elemento es único, este estilo se aplicara únicamente a un elemento. Esto lo conseguimos escribiendo una “#” delante del id.
En el siguiente ejemplo puedes observar cómo se aplica el color blanco al elemento HTML que tenga por id titulo1 (en HTML tendrás algo similar a id=’titulo1′)
#titulo1 {
color: white;
}Selectores de clase
Los selectores de clase aplican el estilo que le indiquemos a todos aquellos elementos que utilicen esa clase. Esto lo conseguimos escribiendo un “.” delante de la clase.
En el siguiente ejemplo puedes observar que aplicamos el color blanco aquellos elementos que utilicen la clase “center” (en html class=’center’)
.center{
color: white;
}También puedes indicarle que un tipo de elemento que utilice dicha clase se vea afectado por este estilo. Por ejemplo, en el siguiente código puedes observar como el estilo solo se aplicara a un párrafo “p” que utilice la clase “center”
p.center{
color: white;
}Agrupación de selectores
Si varios selectores van a tener el mismo estilo, es posible ahorrarse lineas de código. El siguiente ejemplo muestra como los elementos h1, h2, h3 y p tendrán siempre el mismo color.
p, h1, h2, h3{
color: white;
}