How order of classes work in CSS ?

Many developers are aware of the concept of class overwriting in CSS. Well, is true but when it comes to how these classes are overwritten, most of them get confused. Classes are among the important assets of front end development. Therefore, it is very important to have clarity about them. The attributes of style that are required to be included in the HTML elements are defined within the classes and then could be invoked using the “style” attribute within the tag. The style attribute supports as many values(classes) that you provide, and the confusion starts from here!

Whether you talk about defining classes in the same file within the block or invoking classes from the different CSS files. This rule remains consistent.

“The order of the classes in which they would work does not depend upon the order, in which they are written in the class attribute. Rather, it is decided by the order in which they appear in the block or the .css file”

In case multiple classes consist of similar attributes and they are used in the same HTML element. Then, the class modified the latest would be used to style the element.

Below example illustrates the concept of order of classes:
Example



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Specify the order of classes in CSS</title>
    <style type="text/css">
        h1 {
            color: green;
        }
          
        .container {
            width: 600px;
            padding: 5px;
            border: 2px solid black;
        }
          
        .box1 {
            width: 300px;
            height: 50px;
            background-color: purple;
        }
          
        .box2 {
            width: 595px;
            height: 50px;
            background-color: yellow;
        }
    </style>
</head>
  
<body>
    <h1>Geeksforgeeks</h1>
    <b>A Compter Science Portal for Geeks</b>
    <br>
    <br>
    <div class="container">
        <div>
            <input type="text" class="box1" value=
            "How is it going everyone, this is box number 1">
        </div>
  
        <div>
            <input type="text" class="box2" value=
            "This is box number 2">
        </div>
  
        <div>
            <input type="text" class="box1 box2" value=
"Here we are trying to combine box1 and box2, let us name it box3">
        </div>
  
        <div>
            <input type="text" class="box2 box1" value=
"This is similar to box number 3, only difference is
 precedence of classes, let us name it box4">
        </div>
    </div>
</body>
  
</html>

chevron_right


Output:

  • Now if you notice div1 and div2 representing classes box1 and box2 respectively would give you the result as expected.
  • However, in the case of div3 with the style attribute as box1 box2, it invokes multiple CSS classes. Now one might easily confuse that since box1 is written first in the style attribute of div3 and therefore is called prior and then as soon as box2 is invoked it should overwrite box1. But that is not the case. If you look carefully in styling.css file, box1{} is defined prior to box2{} and that is why box1 is overwritten by box2. In case of div4, when we are calling box2 prior to box1. This same mechanism works and provides the style of box2 in the div4 block.
  • Note: Remember the inline CSS always have more priority than the external and internal CSS. Therefore if you use inline styling in the HTML elements, then the properties defined in the inline styling would overwrite predefined classes. YOu can ignore all these things if you are aware of !important keyword.

    full-stack-img




    My Personal Notes arrow_drop_up

    Check out this Author's contributed articles.

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.