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?

html
css

117465 次浏览

小开

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

小开

最佳答案

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>

小开

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