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 ?
- How Specify Length and Width of Square Grid Picture System in Bootstrap?
- How to specify the width and height of the canvas using HTML ?
- How to specify an URL to a document that explains the reason why the text was deleted in HTML ?
- How to Specify Divider gap in Square Grid using Bootstrap ?
- How to specify a list of pre-defined options for input controls in HTML5?
- How to specify the main content of a document in HTML5 ?
- How to specify the response page after submitting the form using HTML5 ?
- How to specify that a button should be disabled using HTML5?
- How to specify an alternate text for an image in HTML ?
- How to specify an image as a server-side image-map in HTML ?
- How to specify a text which is an extended quotation in HTML ?
- How to specify name of an iframe element using HTML ?
- Wildcard Selectors (*, ^ and $) in CSS for classes
- CSS | Pseudo-classes
- jQuery | Get and Set CSS Classes
- Use of :even and :odd pseudo-classes with list items in CSS
- How to apply two CSS classes to a single element ?
- Java Program to Sort Elements in Lexicographical Order (Dictionary Order)
- CSS | order property
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. 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.