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

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>

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

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

Related

Recent Posts