Spécifier des sélecteurs d'attributs multiples en CSS

Question

Quelle est la syntaxe pour faire quelque chose comme :

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

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

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

Des éléments tels que les suivants devraient no être sélectionné :

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

Answer 1

Simple input[name=Sex][value=M] ferait l'affaire. Et c'est en fait bien décrit dans le document standard :

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

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

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

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

Démonstration de JSFiddle

Answer 2

Pour la concaténation, c'est :

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

Et pour prendre le syndicat c'est :

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

Answer 3

Concaténer les sélecteurs d'attributs :

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

Answer 4

J'ajoute qu'il ne doit pas y avoir d'espace entre le sélecteur et le support d'ouverture.

td[someclass] 

fonctionnera. Mais

td [someclass] 

ne le fera pas.

Answer 5

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