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 🤘