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 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
