Es posible dar estilos css a elementos HTML que tienen unos determinados atributos o valores de atributos.
La sintaxis css de uso basicamente es: [atributo operador «valor»]
A continuación unos ejemplos de uso con los diferentes operadores para comprender mejor el funcionamiento:
Operador =
Si el valor del atributo es «exacto«.
button[type="submit"] { background-color:yellow; }
<button type="submit">OK</button>
Si hay «multiples atributos» la sintaxis es colocarlos entre corchetes uno detrás de otro.
[type="submit"][name="marron"] { background-color:brown; }
<button type="submit" name="marron">OK</button>
Operador ~=
Cuando el valor del atributo está formado por «varias cadenas de texto separadas por espacio en blanco» y el valor del atributo coincide con alguna.
[class~="naranja"] { background-color:orange; }
<button class="color naranja butano">OK</button>
Operador |=
Cuando el valor del atributo empieza por valor exacto (ej. valor) o valor seguido de un guión medio (ej. valor-)
[class|="helado"] { background-color:pink; }
<button class="helado-rosa">OK</button>
Operador ^=
Si el valor del atributo «empieza por«…
[data-nombre^="rojo-"] { background-color:red; }
<button data-nombre="rojo-solido">OK</button>
Operador $=
Si el valor del atributo «termina por» ..
[name$="-gris"] { background-color: gray; }
<button name="elemento-gris">OK</button>
Operador *=
Si el valor del atributo «contiene» …
[class*="verde"] { background-color: green; }
<button class="elemento-verde-solido">OK</button>
Demo:
See the Pen CSS: selectores por atributo by Jorge Maiden (@jorgemaiden) on CodePen.
Agradezco tu comentario 🤘