Can an element have multiple classes
In this article, we will see about whether an HTML element can have multiple classes and if so it works. You can assign multiple values to the class attribute of an HTML element, but there must be a space between one value and another. If you assign a CSS style to multiple class values in the same element, the last CSS style will be applied.
Element with Multiple Classes
<!DOCTYPE html>
<html>
<head>
<title>Multiple Classvalue</title>
</head>
<style type="text/css">
.p1{
color: darkred; }
.p3{
color: yellow; }
.p2{
color: blue;
font-weight: bold; }
</style>
<body>
<p class="p1 p2 p3">Hello World !</p>
</body>
</html>Expected Output:
- In the above code, we have a <p> paragraph tag with some text inside. I have given multiple class names like p1, p2, and p3 for the same <p> tag
- In the CSS <style> tag, I have selected p1 class name and set the color to red, the p2 class name color to yellow, and p3 class color to blue.
- As I told you, if you style multiple class values in the same element separately, the last CSS style applied is applied.
- Here We last styled the p3 classname, So p3’s style is applied.
- See the above output, the blue color, and font bold is applied to the paragraph text.
