CSS "and" selector - Can I select elements that have multiple classes?

Question

I'm trying to select all of the elements that have both .checked and .featured tags. So basically, what I'm looking for is an "and" selector; I don't know if there is one or not.

Is there any workaround for cases like this?

is there css collections selector like this `.main [:hover,ul,ul>li,p] { display:inline-block;}` — Muhammad Umer, Aug 23 '13 at 15:35

Gabriele Petrioli · Accepted Answer · 2017-06-23T10:33:07.027

120

You use both (without space between them)

.checked.featured{
   // ...
}

Reference: http://www.w3.org/TR/selectors/#class-html

Example

div{margin:1em;padding:1em;}

.checked{color:green;}
.featured{border:1px solid #ddd;}

.checked.featured{
       font-weight:bold;
    }

<div class="checked">element with checked class</div>
<div class="featured">element with featured class</div>
<div class="featured checked">element with both checked and featured classes</div>

edited Jun 23 '17 at 10:33

answered Jan 30 '13 at 08:08

Gabriele Petrioli

183,160
33
252
304

Sitepoint's reference seems a little easier to grok (IMO, obviously): http://reference.sitepoint.com/css/classselector – Tieson T. Jan 30 '13 at 08:13
is there a similar way to join two ID selectors like that? I tried #pie#bars table {} (two tables in two different IDs). But that does not work. – Makan Tayebi Oct 07 '14 at 06:25
1

@MakanTayebi what you describe is multiple selectors. Just use a comma with the full selector each time. `#pie table, #bars table {}` – Gabriele Petrioli Oct 07 '14 at 08:10
So '.checked.featured' only selects items that have both classes? – Makan Tayebi Oct 07 '14 at 09:01
1

@MakanTayebi yes, that is what the original question is about. – Gabriele Petrioli Oct 07 '14 at 09:06
2

@EdwardBlack , what do you mean exactly ? If you mean to apply it to `h4` and `h5` elements that have both classes then `h4.checked.featured, h5.checked.featured{...}` you need to use `,` for multiple selectors – Gabriele Petrioli Dec 08 '16 at 12:08

score 18 · Answer 2 · answered Jan 30 '13 at 08:07

18

You can just "join" two classes like that: .checked.featured

answered Jan 30 '13 at 08:07

Moseleyi

2,254
1
18
40

score 9 · Answer 3 · answered Jan 30 '13 at 08:10

9

To express AND you simply concatenate your classes .checked.featured which may not be confused with the popular .checked .featured which is the descendant selector.

Have a look at the official Documentation

answered Jan 30 '13 at 08:10

Christoph

48,137
19
97
125

is there css collections selector like this `.main [:hover,ul,ul>li,p] { display:inline-block;` – Muhammad Umer Aug 23 '13 at 15:35
1

@Muhammad take a look at the css4 selector [:matches()](http://dev.w3.org/csswg/selectors4/#matches) – Christoph Aug 23 '13 at 17:14

CSS "and" selector - Can I select elements that have multiple classes?

3 Answers3

Linked