Selecting an element by multiple classes in CSS
If we want, we can select an element that has two classes at the same time without affecting elements with one of these classes.
Let's look at an example. Let's say we have the following code:
<p class="eee">
This is a paragraph with text.
</p>
<p class="zzz">
This is a paragraph with text.
</p>
<p class="eee zzz">
This is a paragraph with text.
</p>
As you can see, the first paragraph has the class eee, the second paragraph has the class zzz, and the third paragraph has both of these classes.
Let's select the last paragraph without touching the rest. To do this, we will write the name of one class and the name of the second class together without a space:
.eee.zzz {
color: red;
}
Select an element that simultaneously has classes eee, zzz, and ccc:
<p class="eee">
This is a paragraph with text.
</p>
<p class="zzz">
This is a paragraph with text.
</p>
<p class="ccc">
This is a paragraph with text.
</p>
<p class="eee zzz ccc">
This is a paragraph with text.
</p>