How to specify the order of classes in CSS ?

When there are rules conflicting to each other been applied to a given element, it gets pretty complicated to determine which rule will actually get applied.
The order in which the attributes are overwritten is determined by where they appear in the CSS, not by the order the classes are defined in the class attribute, i.e. the styling which is defined at the end of the CSS class will be the one to be applied.
Thus, if two declarations have the same weight, origin, and specificity, the latter specified wins.

Example 1: This example displays four labels with unique classes. When we see the labels having order ‘basic extra’ or ‘extra basic’, both follow the styling as .basic placed at the end of the styling order.

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
<head>
<style type="text/css">
    .extra {
        color: #00529B;
        font-size:50px;        
        background-color: pink;
    }
  
    .basic {
             
           color: #00529B;
           font-size:30px;        
        background-color: #90ee90; /*light green*/
    }
</style>
</head>
<body>
    <label class="basic"/>Geeks</label>
    <label class="extra"/>For</label>
    <label class="basic extra"/>Geeks</label>
    <br/>
    <br/>
    <label class="extra basic"/>Geeks For Geeks</label>    
</body>
</html>

chevron_right


Output:

Example:
This example displays four labels with unique classes just as above but we have reversed the order in which we have defined the styles. When we see the labels having order ‘basic extra’ or ‘extra basic’, both follow the styling as .extra placed at the end of the styling order.

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
<head>
<style type="text/css">
  
    .basic {
              
        color: #00529B;
        font-size:30px;     
        background-color: #90ee90; /*light green*/
    }
      
    .extra {
        color: #00529B;
        font-size:50px;     
        background-color: pink;
    }
  
</style>
</head>
<body>
    <label class="basic"/>Geeks</label>
    <label class="extra"/>For</label>
    <label class="basic extra"/>Geeks</label>
    <br/>
    <br/>
    <label class="extra basic"/>Geeks For Geeks</label
</body>
</html>

chevron_right


Output :




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.