Como especificar múltiplos seletores de atributos em CSS

Em CSS, é possível selecionar elementos com base em múltiplos atributos. Isso pode ser útil quando você deseja segmentar elementos específicos com uma combinação de critérios.

Sintaxe:

Para selecionar elementos que correspondam a vários valores de atributos, use a seguinte sintaxe :

[attribute1=value1] [attribute2=value2]

Por exemplo, para selecionar um elemento de entrada com o atributo name="Sex" e o atributo value="M", você usaria o seguinte seletor:

input[name=Sex][value=M]

Exemplo:

Considere a seguinte marcação HTML:

O primeiro elemento de entrada seria selecionado pelo seletor input[name=Sex][value=M] porque possui ambos os atributos name="Sex" e value="M". O segundo elemento de entrada não seria selecionado porque possui o atributo value="F" em vez de value="M".

Observação:

Usando aspas um valor de atributo é obrigatório apenas se o valor não for um identificador válido.

Referência:

Esta sintaxe está bem descrita no padrão CSS documentação:

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; }