EN
CSS - style only elements with multiple classes
3
points
In this article, we would like to show you how to style only those elements that have multiple classes using CSS.
Quick solution:
.class-1.class-2.class-N { /* <div class="class-1 class-2 class-N"></div> */
color: red;
}
Where:
class-1,class-2, ... ,class-Nare class names assigned to the HTML element at once.
Practical example
In this example, we present how to style only those elements, that have assigned both class-1 and class-2 to them.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.class-1.class-2 {
background: yellow;
}
</style>
</head>
<body>
<div class="class-1 class-2">Element with "class-1" and "class-2"</div>
<div class="class-1">Element with "class-1"</div>
<div class="class-2">Element with "class-2"</div>
</body>
</html>