How do I do an "and" selector?

Question

I would like to select all elements that have both one class AND another class. For example, in the following markup, I only want to select elements containing class "foo" and class "bar", but not those that have only one of those classes:

<p class="foo">Larry</p>
<p class="bar">Moe</p>
<p class="foo bar">Curly</p>

Is there a way in CSS to apply styles only to the paragraph containing "Curly" in the above example?

@Huangism: The title is perfectly fine as it is, I really don't see why you keep removing a harmless keyword, and especially after a moderator has rolled it back twice. If the title were something like "[CSS] How do I..." then fine, but that's not the case here. — BoltClock, Jul 30 '14 at 13:59
@BoltClock I was following this http://meta.stackexchange.com/questions/19190/should-questions-include-tags-in-their-titles the title still amkes perfect sense without the tag — Huangism, Jul 30 '14 at 14:01
@MattBall Please have a look at the link in my above comment — Huangism, Jul 30 '14 at 14:08
I agree the original title was only different in the ordering from the linked question "Select CSS based on multiple classes". By this argument, "CSS" should have been removed from that one as well. — David Whiteman, Jul 30 '14 at 14:12
@DavidWhiteman honestly `"Select CSS based on multiple classes"` should be `Select element base don multiple classes` I don't think the 'in [tag]' is needed anywhere since the question already tags it. Unless the question title makes no sense without it. In most cases it is not needed — Huangism, Jul 30 '14 at 14:15
I'm not sure why my reputation keeps getting dinged for this question. It wasn't easy info to find, at least the way that I thought to look for it. http://www.w3schools.com/cssref/css_selectors.asp did not have info on how to do this. — David Whiteman, Jul 30 '14 at 16:57
There is nothing wrong with the original title and there is no reason to argue over it. As for the downvotes, yeah people can be a bit touchy about frequently-asked duplicates. What I can suggest is tell us within the question itself what research you have done. That gives us a starting point. — BoltClock, Jul 31 '14 at 04:52

score 0 · Answer 1 · answered Jul 30 '14 at 13:56

0

p.foo.bar { //styles }

You can concatenate selectors by putting them together.

Of course, you should try to avoid being that specific as it could lead to problems later down the line.

answered Jul 30 '14 at 13:56

speak

5,202
4
36
41

I don't understand why this is getting downvoted so much when the other two answers are spared, given that all three answers are identical. Even if you want to downvote for your own reasons, at least be fair. – BoltClock Jul 30 '14 at 14:00
Because I was first and people hate not being at the top for that sweet, glorious reputation. ;) – speak Jul 30 '14 at 14:01

score 0 · Accepted Answer · answered Jul 30 '14 at 13:56

0

Concatenate the selector. So you would use .foo.bar {}

answered Jul 30 '14 at 13:56

kittyminky

478
6
27

Thanks! It's unfortunate there is no example of this at the following location: http://www.w3schools.com/cssref/css_selectors.asp – David Whiteman Jul 30 '14 at 14:10
@David Whiteman: You can find an example of this usage in the [official W3C spec](http://www.w3.org/TR/selectors/#class-html). W3Schools isn't always the best resource and it is not affiliated with W3C anyway. – BoltClock Jul 31 '14 at 04:53

score 0 · Answer 3 · answered Jul 30 '14 at 13:56

0

p.foo.bar {
    background-color: chucknorris;
}

Just append the selectors behind each other, without a space in between.

answered Jul 30 '14 at 13:56

padarom

3,529
5
33
57

How do I do an "and" selector?

3 Answers3