Tipos de Selectores
Universal*
Se utiliza para seleccionar todos los elementos de la página.
* { margin: 0; }
Selector de etiqueta HTML
Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector. El siguiente ejemplo selecciona todos los párrafos de la página:
h1 { color: blue; } /* el color de los títulos <h1> serán de color azul. */p
{ color: black; } /* el color de todos los párrafos <p> estará en color negro. */
h1,p { color: blue; } /*el color de los títulos <h1> y párrafos <p> serán azul.*/
Ejemplo:
h1 {
color: black;
}
h2 {
color: blue;
}
p {
color: red;
}
Aplicar estilos a etiquetas de título diferentes:
h1 {
color: #E9967A;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
h2 {
color: #E9967A;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
h3 {
color: #E9967A;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
Regla CSS con un selector múltiple, separados por una coma.
h1, h2, h3 {
color: #E9967A;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
Selector descendiente <apan>
Con el selector descendente seleccionamos elementos que se encuentran dentro de otros elementos. Es decir, cuando se encuentra entre las etiquetas de apertura y de cierre del otro elemento. El selector selecciona todos los elementos <span> de la página que se encuentren dentro de un elemento <p>:
p span { color: red; }
<p><div><span>Este es un texto dentro de un span</span></div></p>
Selectores de clase
Define el mismo estilo para diferentes elementos HTML que posean el mismo valor en este atributo. . Si se considera el siguiente código HTML de ejemplo:
.elemento{
text-align: center;
color: red;
}
Se establece el color rojo para todos los elementos HTML con el atributo class=“elemento”.
Ejemplo: <p class="elemento"> Esto es un párrafo </p>
Selectores ID
Se utiliza para definir estilos sobre un elemento, el cual tiene un valor único en todo el documento. Se antepone el símbolo numeral (#).
#idelemento{
text-align: center;
color: red;
}
Se establece en color rojo, los textos que se encuentre dentro de elementos HTML con el atributo id=“idelemento”.
Ejemplo: <p id="idelemento"> Esto es un párrafo </p>