Cascading Style Sheets (CSS) are a powerful component of web development that enable developers to determine the visual appearance of their websites. In CSS, classes serve as selectors that allow us to apply multiple specific styles to an element. You can also use multiple classes for specific elements.
However, when you apply multiple classes to an element, it is necessary to know how to specify the rendering order of these classes to avoid discrepancies and unexpected results. In this article, we'll discuss the different ways to specify class order in CSS, as well as the importance of specificity and cascading rules to help determine priorities.
In CSS, a class is a selector used to apply a specific set of styles to an HTML element. They are powerful tools that allow us to group elements together and maintain consistency across multiple elements on a web page. It allows us to reuse CSS styles across many elements of a large website.
If you define a set of classes in CSS, you can combine them for a specific element to make it unique and attractive. However, you must specify the order of the classes so that the compiler runs the code smoothly and provides the output as per your needs. This is accomplished via cascade and specificity rules.
The order in which we define classes in a CSS file is used to determine their priority when multiple classes are applied to an element. This is because CSS is cascading, which means the compiler reads it from last to top and right to left. Therefore, the last mentioned one in the CSS code gets priority. Let’s understand this better with an example.
Suppose you have two classes defined in your CSS file.
<html>
<head>
<style>
.class1 {
margin: 10px;
padding: 1px;
text-align: center;
font-size: 18px;
color: red;
letter-spacing: 1px;
}
.class2 {
margin: 12px;
padding: 5px;
color: blue;
font-size: 20px;
font-family: Georgia;
letter-spacing: 1px;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<h1> CSS Classes </h1>
<div class="class1"> Here, we have applied class1 to the div element. </div>
<div class="class2"> Here, we have applied class2 to the div element. </div>
<div class="class1 class2"> This is an example. Here, we will apply both classes to the div element. </div>
</body>
</html>
Since .class2 is declared after .class1 in CSS code, class2 has priority. So when we apply class1 and class2 to a div element, the div element is styled primarily based on class2.
However, you can see that attributes not mentioned in class2 but present in class1 are applied to the div element. Just like text-align: center is mentioned in class1, but not in class2. But the last div element is still center aligned. This is because the only properties in class1 will be applied to the element as-is, however, for properties that are identical in both classes, the compiler uses cascading rules to render them. < /p>
The order of classes written in HTML does not determine priority. Consider the following example
Suppose you define two classes similar to the example above. However, you have changed the order of the classes in the HTML code. What do you think the outcome will be? Will it be different from before? let us see.
<html>
<head>
<style>
.class1 {
margin: 10px;
padding: 1px;
text-align: center;
font-size: 18px;
color: red;
letter-spacing: 1px;
}
.class2 {
margin: 12px;
padding: 5px;
color: blue;
font-size: 20px;
font-family: Georgia;
letter-spacing: 1px;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<h1> CSS Classes </h1>
<div class="class1 class2"> This is an example. Here, we will apply first class1 and then class2 to the div element. </div>
<div class="class2 class1"> This is an example. Here, we will apply first class2 and then class1 to the div element. </div>
</body>
</html>
As you can see, the results are unchanged. Styles will be applied only according to the order of classes mentioned in CSS.
In CSS, the !important rule enables developers to override the cascading order of styles and ensure that the specific style required gets the highest priority.
selector{
property: value !important;
}
If you use the !important keyword next to a CSS property, the compiler will ensure that it is applied to that element, regardless of any specific order of styles. Let's look at an example.
Original Linked List: 1 -> 2 -> 3 -> 4 -> 5 -> null
In the following example, since b comes before a, the style will be applied based on the b of the last div element. However, the color of the text is applied as written in class "a", which means the color of the text is red. This is because we used the !important keyword in the color property in the "a" class.
<html>
<head>
<style>
* {
margin: 10px;
padding: 2px;
}
.a {
color: red !important;
letter-spacing: 1px;
text-shadow: 2px 2px 2px grey;
font-size: 16px;
font-family: Calibri;
}
.b {
color: blue;
letter-spacing: 1px;
font-size: 20px;
font-family: Georgia;
}
</style>
</head>
<body>
<h1> !Important Rule </h1>
<div class="a"> Here, we have applied only class "a" to the div element. </div>
<div class="b"> Here, we have applied only class "b" to the div element. </div>
<div class="a b"> Here, we have applied both the classes to the div element. </div>
</body>
</html>
In this article, we discussed cascading and specificity rules for specifying the order of classes in CSS when applying multiple classes to a specific element. We also discussed !important rules for overriding any specific order.
The above is the detailed content of How to specify the order of classes using CSS?. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
