Spécifiez plusieurs sélecteurs d'attributs en CSS

296

Quelle est la syntaxe pour faire quelque chose comme:

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

Fondamentalement, je veux sélectionner l' inputélément qui a l'attribut name="Sex"ainsi que l'attribut value="M":

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

Les éléments tels que les suivants ne doivent pas être sélectionnés:

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

css attributes css-selectors

— John
source

437

Simple input[name=Sex][value=M]ferait très bien. Et c'est en fait bien décrit dans la doc standard :

Plusieurs sélecteurs d'attributs peuvent être utilisés pour faire référence à plusieurs attributs d'un élément, voire plusieurs fois au même attribut.

Ici, le sélecteur correspond à tous les éléments SPAN dont l'attribut "hello" a exactement la valeur "Cleveland" et dont l'attribut "goodbye" a exactement la valeur "Columbus":

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

En remarque, l'utilisation de guillemets autour d'une valeur d'attribut n'est requise que si cette valeur n'est pas un identifiant valide.

JSFiddle Demo

— raina77ow
source

8

y a-t-il quelque chose comme ça, mais OU au lieu de ET?

— törzsmókus

4

Vous voulez dire autre que ,(virgule)?

— raina77ow

2

vous ne pouvez pas écrire span [hello = "Cleveland"], [goodbye = "Columbus"] mais vous devez répéter une partie (éventuellement longue).

— törzsmókus

Vous devez en effet (au moins pour le moment), sauf si vous utilisez des préprocesseurs. Consultez ce fil pour plus de détails.

— raina77ow

67

Pour concaténer c'est:

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

Et pour faire l'union c'est:

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

— Yogesh Khater
source

31

Concaténer les sélecteurs d'attributs:

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

— Dennis
source

1

Il convient de noter qu'au moins une des valeurs d'attribut doit être citée. Cela échouerait si vous l'écriviez comme input[name=Sex][value=M]s'il était valide d'avoir un sélecteur avec un seul attribut qui n'utilisait pas de guillemets.

— stevec

1

@stevec Vouliez-vous mettre cela sur la réponse acceptée? J'ai cité les valeurs dans ma réponse. Je ne pense pas non plus que ce soit vrai. Vous avez besoin de guillemets si la réponse contient certains caractères mais pas dans cet exemple. mothereff.in/unquoted-attributes

— Dennis

J'ai ajouté cette note parce que je l'ai essayée dans plusieurs navigateurs sans guillemets et qu'elle a échoué en tout. Je crois que le problème est que sans guillemets sur au moins un, c'est ambigu car il pourrait être interprété comme une entrée dont le nom estSex][value=M

— stevec

Les crochets @stevec ne sont pas valides dans les attributs non cotés pour cette raison exacte. Cet exemple fonctionne dans Firefox et Chrome: jsfiddle.net/o2abekdh/3

— Dennis

4

Juste pour ajouter qu'il ne devrait pas y avoir d'espace entre le sélecteur et le support d'ouverture.

td[someclass]

marchera. Mais

td [someclass]

Ne fera pas.

— Jean-Philippe Martin
source

-6

[class*="test"],[class="second"] {
background: #ffff00;
}

— Eli
source