Specify multiple attribute selectors in CSS
CssAttributesCss SelectorsCss Problem Overview
What is the syntax for doing something like:
input[name="Sex" AND value="M"]
Basically, I want to select the input element that has the attribute name="Sex" as well as the attribute value="M":
<input type="radio" name="Sex" value="M" />
Elements such as the following should not be selected:
<input type="radio" name="Sex" value="F" />
Css Solutions
Solution 1 - Css
Simple input[name=Sex][value=M] would do pretty nice. And it's actually well-described in the standard doc:
> Multiple attribute selectors can be used to refer to several
> attributes of an element, or even several times to the same attribute.
>
> Here, the selector matches all SPAN elements whose "hello" attribute
> has exactly the value "Cleveland" and whose "goodbye" attribute has
> exactly the value "Columbus":
>
> span[hello="Cleveland"][goodbye="Columbus"] { color: blue; }
As a side note, using quotation marks around an attribute value is required only if this value is not a valid identifier.
Solution 2 - Css
For concatenating it's:
input[name="Sex"][value="M"] {}
And for taking union it's:
input[name="Sex"], input[value="M"] {}
Solution 3 - Css
Concatenate the attribute selectors:
input[name="Sex"][value="M"]
Solution 4 - Css
Just to add that there should be no space between the selector and the opening bracket.
td[someclass]
will work. But
td [someclass]
will not.