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.
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:
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; }
Utilizando selectores de atributos realiza los siguientes ejercicios:
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