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.
Con el selector :not() puedes excluir elementos que cumplan una condición específica.
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^="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. |
| not([class]) | El atributo class no existe en la etiqueta. |
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; }
Comprueba tu apendizaje
Ejercicio propuesto
- 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 .