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" />

css attributes css-selectors

— John
fonte

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