How to override CSS class properties using another CSS class

Question

I am new to CSS3 and I want to be able to do the following:

When I add a class to an element, it overrides the properties of another class used in that particular element.

Say that I have

<a class="left carousel-control" href="#carousel" data-slide="prev"> 

I want to be able to add a class called bakground-none that will override the default background in the left class.

Thank!

Answer 1

There are different ways to override properties. Assuming you have

 .left { background: blue } 

eg. any of the following will override it:

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

The first two “gains” in the specificity of the selector; the third wins !important , dumb tool.

You can also organize your style sheets so that, for example, a rule

 .background-none { background: none; } 

wins just in order, i.e. after an otherwise “powerful” rule. But this imposes restrictions and requires that you be careful when reorganizing any style sheets.

These are all examples of CSS Cascade , a key but widely understood concept. It defines precise rules for resolving conflicts between style sheet rules.

PS I used left and background-none since they were used in the question. They are examples of class names that should not be used because they reflect certain rendering rather than structural or semantic roles.

Answer 2

Just use !important , this will help override

 background:none !important; 

Take a look at this: when-use-is-important-it's-right-choice

Answer 3

As an alternative to the important keyword, you can make the selector more specific, for example:

 .left.background-none { background:none; } 

(Note: there are no spaces between class names).

In this case, the rule will apply if both the .left and .background-none attributes are listed in the class attribute (regardless of order or proximity).

Answer 4

If you list the bakground-none class after other classes, its properties override the ones already set. There is no need to use !important .

For example:

 .red { background-color: red; } .background-none { background: none; } 

and

 <a class="red background-none" href="#carousel">...</a> 

The link will not have a red background. Note that this only overrides properties that have a selector that is less or equally specific.

Answer 5

LIFO is the way the browser parses CSS properties. If you use Sass, declare a variable called

"$ header-background: red;"

use it instead of directly assigning values ​​like red or blue. If you want to override only reassigning the value to

"$ header-background: blue"

then

background color: $ header-background;

it should smoothly override. Using "! Important" is not always the right choice. This is just a fix.

Answer 6

You must override by increasing the specificity of your style. There are various ways to increase Specificity. Using !important , which affects specificity, is bad practice because it violates the natural cascading in your stylesheet.

The following diagram, taken from css-tricks.com , helps you create the right specificity for your element based on the point structure. Whatever specificity would have higher points would win. Sounds like a game - doesn't it?

Calculate sample calculations here at css-tricks.com . This will help you understand the concept very well, and it only takes 2 minutes.

If you like to create and / or compare different features yourself, try this spec calculator: https://specificity.keegan.st/ or you can just use the paper / pencil tradition.

For further reading, try MDN Web Docs .

All the best to use !important .