Selectores por atributo en CSS3
A los Selectores por atributo vistos en el capítulo 2 le añadimos tres nuevos selectores.
elemento[atributo]: Aplicamos estilos a todos los elementos que contengan el atributo. CSS2
elemento[atributo=valor]: Aplicamos estilos a todos los elementos cuyo atributo tenga exactamente 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(-). CSS2
elemento[atributo~="valor"]: Aplicamos estilos a todos los elementos cuyo atributo es exactamente el valor o contiene el valor seguido por espacio. CSS2
elemento[atributo^="valor"]: Aplicamos estilos a todos los elementos cuyo atributo comience exactamente por el valor. CSS3
elemento[atributo$="valor"]: Aplicamos estilos a todos los elementos cuyo atributo termine exactamente por el valor. CSS3
elemento[atributo*="valor"]: Aplicamos estilos a todos los elementos cuyo atributo contenga exactamente el valor. CSS3
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
a[href^="https"] { background-color: blue; color:white;}
a[href$=".php"] { background-color: green; color:white; }
a[href*="htm"] { background-color: yellow; }
</style>
</head>
<body>
<p> Los enlaces seguros van a tener fondo azul, los enlaces con los programas php van a tener fondo verde y los enlaces con páginas html o htm van a ser amarillos.</p>
<a href="https://www.bbva.es">BBVA</a>
<a href="http://www.bbva.es/buscar.php">Buscador php</a>
<a href="http://www.bbva.es/mapaweb.htm">Mapa web</a>
<a href="http://www.bbva.es/sucursales">Sucursales</a>
</body>
</html>