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.
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.
- How order of classes work in CSS ?
- PHP | Classes
- Classes of JSP API
- ES6 | Classes
- jQuery | Get and Set CSS Classes
- Classes in TypeScript
- Perl | Classes in OOP
- Abstract Classes in PHP
- C# | Abstract Classes
- CSS | Pseudo-classes
- Classes in R Programming
- Generic Classes in Scala
- Kotlin Inline classes
- When to use static vs instantiated classes in PHP?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.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.