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

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?

3 Answers

You use both (without space between them)

.checked.featured{ // ... } 

Reference:

Example

div{margin:1em;padding:1em;} .checked{color:green;} .featured{border:1px solid #ddd;} .checked.featured{ font-weight:bold; }

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

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

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