Especificar múltiples selectores de atributos en CSS

296

¿Cuál es la sintaxis para hacer algo como:

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

Básicamente, quiero seleccionar el inputelemento que tiene el atributo name="Sex", así como el atributo value="M":

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

No se deben seleccionar elementos como los siguientes :

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

Respuestas:

437

Simple input[name=Sex][value=M]haría bastante bien. Y en realidad está bien descrito en el documento estándar :

Se pueden usar múltiples selectores de atributos para referirse a varios atributos de un elemento, o incluso varias veces al mismo atributo.

Aquí, el selector coincide con todos los elementos SPAN cuyo atributo "hola" tiene exactamente el valor "Cleveland" y cuyo atributo "adiós" tiene exactamente el valor "Columbus":

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

Como nota al margen, se requiere el uso de comillas alrededor de un valor de atributo solo si este valor no es un identificador válido.

JSFiddle Demo

raina77ow
fuente
8
¿Hay algo como esto, pero OR en lugar de AND?
törzsmókus
44
¿Quieres decir que no sea ,(coma)?
raina77ow
2
no puede escribir span [hello = "Cleveland"], [goodbye = "Columbus"] pero debe repetir una parte (posiblemente larga).
törzsmókus
De hecho, debe hacerlo (al menos por el momento), a menos que use preprocesadores. Consulte este hilo para más detalles.
raina77ow
67

Para concatenar es:

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

Y para tomar la unión es:

input[name="Sex"], input[value="M"] {}
Yogesh Khater
fuente
31

Concatenar los selectores de atributos:

input[name="Sex"][value="M"]
Dennis
fuente
1
Vale la pena señalar que al menos uno de los valores de los atributos debe ser citado. Esto fallaría si lo escribiera como input[name=Sex][value=M]si fuera válido tener un selector con un solo atributo que no utilizara comillas.
stevec
1
@stevec ¿Querías poner esto en la respuesta aceptada? He citado los valores en mi respuesta. Tampoco creo que sea verdad. Necesita comillas si la respuesta contiene ciertos caracteres pero no en este ejemplo. mothereff.in/unquoted-attributes
Dennis
Agregué esa nota porque lo probé en varios navegadores sin comillas y falló en todos. Creo que el problema es que sin comillas en al menos uno, es ambiguo porque podría interpretarse como una entrada cuyo nombre esSex][value=M
stevec
Los corchetes @stevec no son válidos en los atributos sin comillas por ese motivo exacto. Este ejemplo funciona en Firefox y Chrome: jsfiddle.net/o2abekdh/3
Dennis
4

Solo para agregar que no debe haber espacio entre el selector y el soporte de apertura.

td[someclass] 

trabajará. Pero

td [someclass] 

No lo haré.

Jean-Philippe Martin
fuente
-6
[class*="test"],[class="second"] {
background: #ffff00;
}
Eli
fuente