Recently in an interview, I was asked a question about multiple classes assigned to the same div in CSS. Let's see this in detail.
Many classes can be assigned to the div by the following method. Just separate in class names with spaces like this.
<div class="test1 test2 test3"> Hello </div>
The div will then match style rules for three different selectors .test1 .test2 .test3
If the same property is declared in both the classes CSS then conflict is resolved through specificity, then according to the order of CSS declarations. The order of classes does not matter.
<html>
<head>
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="class1 class2 class3">text 3</div>
<script src="script.js"></script>
</body>
</html>
style.css
.class3{
background-color: yellow
}
.class1 {
background-color: red
}
.class2 {
background-color:#296BCB;
}
Output:
As we can see the CSS rule which is being declared at last is applied to the div.
Now, what if I have to make one CSS rule to higher specificity then we can use either !important or div. in the rule.
.class3{
background-color: yellow !important
}
.class1 {
background-color: red
}
.class2 {
background-color:#296BCB;
}
output:
If the two rules don't conflict then both rules will be applied.
.class3{
background-color: yellow !important
}
.class1 {
color: brown
}
.class2 {
background-color:#296BCB;
}
output:
References
That's all for this article. If you like this article do subscribe to the newsletter or follow me on Twitter
