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:
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.
- How to specify the order of classes in CSS ?
- How CSS transition work with linear gradient background button?
- 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 ?
- How do Web Servers work?
- How to work with Node.js and JSON file ?
- Why Transition properties does not work with display properties ?
- How HTTP POST request work in node.js ?
- CSS | order property
- PHP | Classes
- Abstract Classes in PHP
- jQuery | multiple classes Selector
- Classes in TypeScript
- How to Add and Remove multiple classes in jQuery ?
- .pull-left and .pull-right classes in Bootstrap 4
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.