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“.

Si hay “multiples atributos” la sintaxis es colocarlos entre corchetes uno detrás de otro.

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.

Operador |=

Cuando el valor del atributo empieza por valor exacto (ej. valor) o valor seguido de un guión medio (ej. valor-)

Operador ^=

Si el valor del atributo “empieza por“…

Operador $=

Si el valor del atributo “termina por” ..

Operador *=

Si el valor del atributo “contiene” …

Demo:

See the Pen CSS: selectores por atributo by Jorge Maiden (@jorgemaiden) on CodePen.