Menu
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?
506
We aren't limited to only two here, we can combine as many classes and IDs into a single selector as we want.
An element is usually only assigned one class. The corresponding CSS for that particular class defines the appearance properties for that class. However, we can also assign multiple classes to the same element in CSS.
Use the getElementsByClassName method to get elements by multiple class names, e.g. document. getElementsByClassName('box green') . The method returns an array-like object containing all the elements that have all of the given class names.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
