Especificar seletores múltiplos de atributos no CSS

Qual é a sintaxe para fazer algo assim:

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

Basicamente, eu quero selecionar o elemento input que tem o atributo name="Sex" assim como 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" />
DavidRR
Pergunta editada :em
Programação
attributes css css-selectors
9º setembro 2012 в 4:20
43 vistas
Solução

Simples input[name=Sexo][value=M] faria muito bem. E it's na verdade está bem descrito no [doc padrão][1]:

Selecionadores múltiplos de atributos podem ser utilizados para se referir a vários

atributos de um elemento, ou mesmo várias vezes ao mesmo atributo.

Aqui, o selector corresponde a todos os elementos SPAN cujo " olá " atributo

tem exactamente o valor "Cleveland" e de quem " adeus" tem o atributo

exactamente o valor " Columbus":

span[hello="Cleveland"][goodbye="Columbus"] { cor: azul; }

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

[JSFiddle Demo][2]

[1]: http://www.w3.org/TR/CSS2/selector.html#attribute-selectors [2]: http://jsfiddle.net/W3aZs/1/

TylerH
Resposta editada :em
Comentários (4)

Para a concatenar's:

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

E por aceitar a união... 39; s:

input[name="Sex"], input[value="M"] {}
eebbesen
Resposta editada :em
Comentários (0)

Concatenar os seletores de atributos:

input[name="Sex"][value="M"]
Comentários (4)

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

td[someclass]

vai funcionar. Mas...

td [someclass]

não o fará.

Comentários (0)
 
[class*="test"],[class="second"] {
background: #ffff00;
}
Comentários (0)