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

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

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

Pour concaténer c'est:

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

Et pour faire l'union c'est:

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

Concaténer les sélecteurs d'attributs:

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

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.

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