Saltar la navegación

2. Selectores - Tipos

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>

Creado con eXeLearning (Ventana nueva)