Selección por atributo en CSS
Dependiendo de que un elemento tenga o no atributo, o dependiendo de los valores que pueda tener este, le podemos aplicar hojas de estilos. Los selectores por atributo son los siguientes:
elemento[atributo]: Aplicamos estilos a todos los elementos que contengan el atributo.
elemento[atributo=valor]: Aplicamos estilos a todos los elementos cuyo atributo tenga el valor.
elemento[atributo|="valor"]: Aplicamos estilos a todos los elementos cuyo atributo es exactamente el valor o contiene el valor seguido por un guión(-).
elemento[atributo~="valor"]: Aplicamos estilos a todos los elementos cuyo atributo es exactamente el valor o contiene el valor seguido por espacio.
Selección que contiene el atributo. elemento[atributo]
Aplicamos estilos a todos los elementos que contengan el atributo.
Ejemplo:
<head> <style> span[lang] { background-color:blue; color:white; } </style> </head> <body> <p>Hola y Bonjour tienen fondo azul y texto blanco porque tienen el atributo lang: <span lang="es">Hola <span > Hello <span lang="fr"> Bonjour </body>Pruébalo
Selección que contiene el atributo exactamente igual al valor. elemento[atributo=valor]
Aplicamos estilos a todos los elementos que contengan exactamente el valor del atributo.
Ejemplo:
<head> <style> span[lang="fr"] { background-color:blue; color:white; } </style> </head> <body> <p>Bonjour tienen fondo azul y texto blanco porque tienen el atributo lang con valor fr: <span lang="es">Hola <span > Hello <span lang="fr"> Bonjour </body>Pruébalo
Selección que cuyo atributo contiene el valor. elemento[atributo|=valor]
Aplicamos estilos a todos los elementos que contengan el atributo que es exactamente igual al valor o empieza por valor y un carácter guión(-).
Ejemplo:
<head> <style> span[lang|="en"] { background-color:blue; color:white; } </style> </head> <body> <p>Hello tienen fondo azul y texto blanco porque tienen el atributo lang con valor en o en-: <span lang="es">Hola <span lang="en"> Hello <span lang="en-us"> Hello <span lang="en-gb"> Hello <span lang="fr"> Bonjour </body>Pruébalo
Selección cuyo atributo contiene el valor. elemento[atributo~=valor]
Aplicamos estilos a todos los elementos que contengan el atributo que es exactamente igual al valor o empieza por valor y un espacio.
Ejemplo:
<head> <style> a[href~=enlace] { color:red; } </style> </head> <body> <p>los enlaces que contienen la palabra enlace con un espacio son de color rojo <a href="enlace 1.html"> Enlace 1 <a href="enlace 2.html"> Enlace 2 <a href="enlace3.html"> Enlace 3 </body>Pruébalo