Cómo especificar múltiples selectores de atributos en CSS

En CSS, es posible seleccionar elementos basados ​​en múltiples atributos. Esto puede ser útil cuando desea apuntar a elementos específicos con una combinación de criterios.

Sintaxis:

Para seleccionar elementos que coincidan con múltiples valores de atributos, use la siguiente sintaxis :

[attribute1=value1] [attribute2=value2]

Por ejemplo, para seleccionar un elemento de entrada con el atributo nombre="Sexo" y el atributo value="M", usarías el siguiente selector:

input[name=Sex][value=M]

Ejemplo:

Considere el siguiente formato HTML:

El primer elemento de entrada sería seleccionado por el selector input[name=Sex][value=M] porque tiene ambos los atributos nombre="Sexo" y valor="M". El segundo elemento de entrada no se seleccionaría porque tiene el atributo value="F" en lugar de value="M".

Nota:

Usar comillas se requiere un valor de atributo solo si el valor no es un identificador válido.

Referencia:

Esta sintaxis está bien descrita en CSS documentación estándar:

Multiple attribute selectors can be used to refer to several
attributes of an element, or even several times to the same attribute.

...

span[hello="Cleveland"][goodbye="Columbus"] { color: blue; }