45.3 Selectores

Los selectores determinan los elementos sobre los que serán aplicados los estilos usando el lenguaje CSS. En el ejemplo 2 se aplicaron estilos CSS (incrustado o a través de un archivo .CSS) usando reglas para los selectores h1, p y h2.

Existen distintos tipos de selectores:

Selectores de tipo

El estilo se aplica a todos los elementos del tipo dado dentro del documento.

Ejemplo:

p {color: red;}

En este ejemplo todos los párrafos tendrán color rojo.

Selectores de clase

Se aplica el estilo definido a los elementos de una misma clase.

Ejemplo: si en el documento html, existen elementos con el atributo: class="Nombre", se puede definir una regla para estos elementos de la forma:

.Nombre {color: blue; background-color: yellow;}

Aquí los elementos que sean de la clase “Nombre” tendrán color azul y fondo amarillo.

Selector de ID

Se asigna a un valor de id, por tanto a un único elemento, y en su sintaxis dicho valor va precedido de “#”.

Ejemplo: si en el body un elemento tiene el atributo id cuyo valor es “identificador”, es posible asignar una regla CSS como:

#identificador{ background-color: skyblue;}

Selector universal

Se aplica a todos los elementos el documento html, y se hace mediante el símbolo “*“.

Ejemplo:

*{color: green;}

Aplica el color verde a todos los elementos de la página.

Selector de atributo

Similar a los selectores de clase, selecciona todos los elementos que comparten un valor de atributo.

Admite diferentes formas de sintaxis (estilo regular expresions):

• [atributo=val]: Selecciona todos los elementos que tengan exactamente el valor dado (‘val’) en ese atributo.
• [atributo~=val]: Selecciona los elementos cuyo atributo contenga entre sus palabras (separadas por espacios) el valor dado ‘val’.
• [atributo|=val]: Selecciona los elementos cuyo atributo sea exactamente el valor dado (‘val’), o comience por ‘val-’.
• [atributo^=val]: Selecciona los elementos en que el valor del atributo comienza por ‘val’.
• [atributo$=val]: Selecciona los elementos en que el valor del atributo finaliza en ‘val’.
• [atributo*=val]: Selecciona los elementos en que el valor del atributo contiene ‘val’.

Ejemplo

a[href*="google"] {
 background-color: gold;
}

Esta regla tendrá como efecto un resaltado dorado en los enlaces que contengan la palabra ‘google’ en la url:

Visita la Universidad Externado
Visita Google
Visita Google Maps