Grouping in CSS attribute selectors

Question

Are these equivalent:-

selector[attr1="val1"] [attr2="val2"] {
  property: value;
}

Select a {selector} which has a attribute called [attr1] that has the exact value of "val1", AND also the same {selector} which has a attribute called [attr2] that has the exact value of "val2". Since the logical operator is "AND", any one condition being wrong will make the selector fail.

selector[attr1="val1"], selector[attr2="val2"] {
 property: value;
}

This one uses grouping. Can I assume the same for the later as I did for the former?

Starscream1984 · Accepted Answer · 2014-04-12 10:32:22Z

1

No, the comma is more like an OR, it will select targets with either attribute 1 or attribute 2 or both

answered Apr 12, 2014 at 10:32

Starscream1984

3,0621 gold badge21 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jawad Asghar Ali Over a year ago

p, h1 {color: red;} - select "p" AND "h1"?

Jawad Asghar Ali Over a year ago

This will make "p" AND "h1" = color:red?

Starscream1984 Over a year ago

Yes, read reference.sitepoint.com/css/selectorgrouping, it will affect both of them, it is a logical OR

Starscream1984 Over a year ago

If it was a logical AND it would only affect elements that were both p and h1 (which is not valid anyway)

Collectives™ on Stack Overflow

Grouping in CSS attribute selectors

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related