Specify multiple attribute selectors in CSS

css attributes css-selectors
John picture John · Sep 9, 2012 · Viewed 156k times · Source

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

Answer

raina77ow picture raina77ow · Sep 9, 2012

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.

JSFiddle Demo

Related questions

How do you define attribute selectors in SASS?

In CSS, you can do this: input[type=submit] { // properties } It's a very useful for styling form buttons. How do you do the same thing in SASS?

Read More
Define an <img>'s src attribute in CSS

I need to define an <img>'s src attribute in CSS. Is there a way to specify this attribute?

Read More
Make HTML5 video poster be same size as video itself

Does anyone know how to resize the HTML5 video poster such that it fits the exact dimensions of the video itself? here's a jsfiddle which shows the problem: http://jsfiddle.net/zPacg/7/ here's that code: HTML: <video controls width="100%" …

Read More