This article explains how to specify multiple classes in a selector.
Basic specification method
When specifying multiple classes, use spaces to separate them in the class attribute.
<div class="box red-bg large-text">Multiple class example</div>
This allows you to apply three classes to one element.
Benefits of specifying multiple classes
Increased style reusability: By dividing common styles into separate classes, you can combine and reuse them.
Fine style adjustments possible: You can add only the classes you need for each element, allowing for flexible design adjustments.
Practical use example
For example, you can use it like this for blog post titles:
<h2 class="article-title large-heading blue-text">Mastering classes in HTML! </h2>
In this example, three classes, “article-title”, “large-heading”, and “blue-text”, are applied at the same time.
How to use it in CSS
If you want to apply a style to only a specific combination of elements with multiple classes, you can write it in CSS like this.
<h2 class="article-title large-heading blue-text">Master Classes in HTML! </h2>
<h2 class="article-title large-heading red-text">Master Classes in HTML! </h2>
<style>
.article-title.blue-text {
/* Styles that apply only to elements with article-title and blue-text classes */
text-decoration: underline;
color:blue;
}
</style>
Now, only the blue article titles can be underlined.
Summary
Specifying multiple classes greatly expands the possibilities of web design using HTML and CSS. It is highly flexible and improves code reusability, so please try to use it actively.
It will broaden the scope of your designs and allow you to code more efficiently.
