How to override the properties of a CSS class using another CSS class

Question

I am fairly new to CSS3 and I want to be able to do the following   When I add a class into a an element  it overrides the properties of another class used in this specific element   Let s say that I have   lt a class  left carousel-control  href   carousel  data-slide  prev  gt    I want to be able to add a class called bakground-none  that will over override the default background in the class left   Thanks

User · Answer

There are different ways in which properties can be overridden. Assuming you have

.left { background: blue }

e.g. any of the following would override it:

a.background-none { background: none; }
body .background-none { background: none; }
.background-none { background: none !important; }

The first two “win” by selector specificity; the third one wins by !important, a blunt instrument.

You could also organize your style sheets so that e.g. the rule

.background-none { background: none; }

wins simply by order, i.e. by being after an otherwise equally “powerful” rule. But this imposes restrictions and requires you to be careful in any reorganization of style sheets.

These are all examples of the CSS Cascade, a crucial but widely misunderstood concept. It defines the exact rules for resolving conflicts between style sheet rules.

P.S. I used left and background-none as they were used in the question. They are examples of class names that should not be used, since they reflect specific rendering and not structural or semantic roles.

User · Answer

If you list the bakground-none class after the other classes  its properties will override those already set  There is no need to use  important here   For example    red   background-color  red     background-none   background  none      and   lt a class  red background-none  href   carousel  gt     lt  a gt    The link will not have a red background  Please note that this only overrides properties that have a selector that is less or equally specific

User · Answer

LIFO is the way browser parses CSS properties  If you are using Sass declare a variable called as        header-background  red     use it instead of directly assigning values like red or blue  When you want to override just reassign the value to        header-background blue    then     background-color  header-background    it should smoothly override  Using   important  is not always the right choice  Its just a hotfix

User · Answer

As an alternative to the important keyword  you could make the selector more specific  for example    left background-none   background none       Note  no space between the class names    In this case  the rule will apply when both  left and  background-none are listed in the class attribute  regardless of the order or proximity

User · Answer

Just use  important it will help to override   background none  important    Although it is said to be a bad practice   important can be useful for utility classes  you just need to use it responsibly  check this  When Using important is the right choice

User · Answer

You should override by increasing Specificity of your styling  There are different ways of increasing the Specificity  Usage of  important which effects specificity  is a bad practice because it breaks natural cascading in your style sheet    Following diagram taken from css-tricks com will help you produce right specificity for your element based on a points structure  Whichever specificity has higher points  will win  Sounds like a game - doesn t it     Checkout sample calculations here on css-tricks com  This will help you understand the concept very well and it will only take 2 minutes    If you then like to produce and or compare different specificities by yourself  try this Specificity Calculator  https   specificity keegan st  or you can just use traditional paper pencil     For further reading try MDN Web Docs   All the best for not using  important

[css] How to override the properties of a CSS class using another CSS class

Examples related to css

Examples related to class

Examples related to overriding