Class Name Selectors
suggest changeThe class name selector select all elements with the targeted class name. For example, the class name .warning
would select the following <div>
element:
<div class="warning">
<p>This would be some warning copy.</p>
</div>
You can also combine class names to target elements more specifically. Let’s build on the example above to showcase a more complicated class selection.
CSS
.important {
color: orange;
}
.warning {
color: blue;
}
.warning.important {
color: red;
}
HTML
<div class="warning">
<p>This would be some warning copy.</p>
</div>
<div class="important warning">
<p class="important">This is some really important warning copy.</p>
</div>
In this example, all elements with the .warning
class will have a blue text color, elements with the .important
class with have an orange text color, and all elements that have both the .important
and .warning
class name will have a red text color.
Notice that within the CSS, the .warning.important
declaration did not have any spaces between the two class names. This means it will only find elements which contain both class names warning
and important
in their class
attribute. Those class names could be in any order on the element.
If a space was included between the two classes in the CSS declaration, it would only select elements that have parent elements with a .warning
class names and child elements with .important
class names.