Especifique vários seletores de atributos em CSS

296

Qual é a sintaxe para fazer algo como:

input[name="Sex" AND value="M"]

Basicamente, quero selecionar o inputelemento que possui o atributo name="Sex"e o atributo value="M":

<input type="radio" name="Sex" value="M" />

Elementos como os seguintes não devem ser selecionados:

<input type="radio" name="Sex" value="F" />
John
fonte

Respostas:

437

Simples input[name=Sex][value=M]seria muito bom. E é realmente bem descrito no documento padrão :

Vários seletores de atributos podem ser usados ​​para se referir a vários atributos de um elemento ou até várias vezes ao mesmo atributo.

Aqui, o seletor corresponde a todos os elementos SPAN cujo atributo "olá" possui exatamente o valor "Cleveland" e cujo atributo "adeus" possui exatamente o valor "Columbus":

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

Como observação lateral, o uso de aspas em torno de um valor de atributo é necessário apenas se esse valor não for um identificador válido.

JSFiddle Demo

raina77ow
fonte
8
existe algo parecido com isto, mas OR em vez de AND?
törzsmókus 20/09/16
4
Você quer dizer diferente de ,(vírgula)?
raina77ow
2
você não pode escrever span [hello = "Cleveland"], [adeus = "Columbus"], mas você deve repetir uma parte (possivelmente longa).
törzsmókus 20/09/16
Você precisa mesmo (pelo menos por enquanto), a menos que use pré-processadores. Consulte este tópico para obter mais detalhes.
raina77ow 25/09/16
67

Para concatenar é:

input[name="Sex"][value="M"] {}

E para a união é:

input[name="Sex"], input[value="M"] {}
Yogesh Khater
fonte
31

Concatene os seletores de atributo:

input[name="Sex"][value="M"]
Dennis
fonte
1
Vale ressaltar que pelo menos um dos valores de atributo deve ser citado. Isso falharia se você o escrevesse como input[name=Sex][value=M]se fosse válido ter um seletor com apenas um atributo que não usasse aspas.
Stevec 22/05/19
1
@stevec Você quis colocar isso na resposta aceita? Eu citei os valores na minha resposta. Eu também não acho que isso seja verdade. Você precisará de aspas se a resposta contiver certos caracteres, mas não neste exemplo. mothereff.in/unquoted-attributes
Dennis
Eu adicionei essa nota porque tentei em vários navegadores sem aspas e falhou em tudo. Eu acredito que a questão é que, sem aspas, em pelo menos um, é ambíguo, pois poderia ser interpretada como uma entrada cujo nome éSex][value=M
stevec
Os colchetes @stevec são inválidos em atributos não citados pelo mesmo motivo. Este exemplo funciona no Firefox e Chrome: jsfiddle.net/o2abekdh/3
Dennis
4

Apenas para acrescentar que não deve haver espaço entre o seletor e o suporte de abertura.

td[someclass] 

vai funcionar. Mas

td [someclass] 

não vou.

Jean-Philippe Martin
fonte
-6
[class*="test"],[class="second"] {
background: #ffff00;
}
Eli
fonte