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

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


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"] {}

31

Concatenar los selectores de atributos:

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

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é.


-6
[class*="test"],[class="second"] {
background: #ffff00;
}
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.