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