Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Specify multiple attribute selectors in CSS

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" /> 
like image 823
John Avatar asked Sep 09 '12 16:09

John


People also ask

How do I use multiple selectors in CSS?

Example# When you group CSS selectors, you apply the same styles to several different elements without repeating the styles in your style sheet. Use a comma to separate multiple grouped selectors. So the blue color applies to all <div> elements and all <p> elements.

How do you group multiple selectors?

The grouping selector selects all the HTML elements with the same style definitions. It will be better to group the selectors, to minimize the code. To group selectors, separate each selector with a comma.

Can multiple selectors apply the same style?

CSS allows you to group multiple selectors that share the same declaration. This optimization technique allows you to apply the same style to multiple elements to save space. You can combine grouped selectors with contextual and other selectors to create powerful yet compact rules for your style sheets.

Can CSS selectors be combined?

A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator. There are four different combinators in CSS: descendant selector (space)


1 Answers

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

like image 84
raina77ow Avatar answered Oct 13 '22 13:10

raina77ow