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 🤘