80

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?

Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
Mia
  • 6,220
  • 12
  • 47
  • 81

3 Answers3

125

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>
Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
  • 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 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 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
18

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

Moseleyi
  • 2,585
  • 1
  • 24
  • 46
10

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

Christoph
  • 50,121
  • 21
  • 99
  • 128