Selector de atributos en CSS

En la unidad anterior vimos algunas de las pseudo-clases de CSS que nos permitían realizar una selección más específica de los elementos a los que queremos aplicar un cierto estilo. Por ejemplo, utilizábamos la jerarquía de los elementos para especificar la selección.

En esta sección vamos a ver los selectores de atributos que nos permitirán también realizar una selección más específica de los elementos a los que queremos aplicar un cierto estilo en función de los atributos o valores que tengan asignados.

Selector de atributos en CSS

Los selectores de atributos permiten elegir elementos HTML en función de sus atributos y/o valores de esos atributos.

Los tipos de selectores de atributos son los siguientes:

• [nombre_atributo], selecciona los elementos que tienen establecido el atributo llamado nombre_atributo independientemente de su valor. 

• [nombre_atributo=valor], selecciona los elementos que tienen establecido un atributo llamado nombre_atributo con un valor igual a valor.

• [nombre_atributo~=valor], selecciona los elementos que tienen establecido un atributo llamado nombre_atributo y al menos uno de los valores del atributo es valor.

• [nombre_atributo|=valor], selecciona los elementos que tienen establecido un atributo llamado nombre_atributo, cuyo valor es una lista de valores, donde alguno comienza por valor.

• [nombre_atributo$=valor] Selecciona aquellas etiquetas cuyo atributo acabe en ese valor.

• [nombre_atributo^=valor] Selecciona aquellas etiquetas cuyo atributo comience por ese valor.

Ejemplo

A continuación se muestran algunos ejemplos de estos tipos de selectores:

Atributo	Descripción
[href]	El atributo href existe en la etiqueta.
[href="#"]	El atributo href existe y su valor es igual al texto #.
[href\*="eniun"]	El atributo href existe y su valor contiene el texto eniun.
[href^="https://"]	El atributo href existe y su valor comienza por https://.
[href$=".pdf"]	El atributo href existe y su valor termina por .pdf (es un enlace a un PDF).
[class~="eniun"]	El atributo class contiene una lista de valores, que contiene eniun.
[lang|="es"]	El atributo lang contiene una lista de valores, donde alguno empieza por es-.

Selecciona aquellas imágenes con extensión png:

img[src$=".png"]						

Se muestran de color azul todos los enlaces que tengan un atributo «class», independientemente de su valor:

a[class] { color: blue; }

Se muestran de color azul todos los enlaces que tengan un atributo «class» con el valor «externo»:

a[class="externo"] { color: blue; }

Se muestran de color azul todos los enlaces que apunten al sitio «http://www.ejemplo.com».

a[href="http://www.ejemplo.com"] { color: blue; }

Selecciona todos los elementos de la página cuyo atributo «lang» sea igual a «en», es decir, todos los elementos en inglés

*[lang=en] { ... }

Selecciona todos los elementos de la página cuyo atributo «lang» empiece por «es», es decir, «es», «es-ES», «es-AR», etc.

*[lang|="es"] { color : red } 

Selecciona todos los enlaces que no tengan el atributo href.

a:not([href]) { color: purple; }

Ejemplo

Utilizando selectores de atributos realiza los siguientes ejercicios:

• Selecciona aquellas imágenes con extensión png y añade un borde de 5 píxeles de color rojo.
• Muestra de color verde todos los enlaces que tengan un atributo “class”, independientemente de su valor.
• Muestra de color rosa todos los enlaces que apunten al sitio “https://www.eniun.com”.
• Muestra de color lila todos los enlaces que tengan un atributo “class” con el valor “externo”.

img[src$=".png"]{border: 5px solid red;}
a[class] { color: green; }
a[href="https://www.eniun.com"] { color: pink; }
a[class~="externo"] { color: purple; }

dark

Comprueba tu aprendizaje

Ejercicios propuestos

Actividad 6.

• Utiliza los selectores de atributos, la pseudo-clase :not y tus conocimientos de CSS para dibujar un borde rojo (border: 3px solid red;) a todas las imágenes que no tengan el atributo “alt”. De esta forma nunca se te olvidará poner ese atributo.
• Utiliza los selectores de atributos y el pseudo-elemento after para añadir un icono de la imagen de pdf justo detrás de todos los enlaces que apunten a un pdf .