How to stop css ad redefinition

Question

I have a div with ABC classes
I added a style to c to show the color as "Red",
The problem is that it is overridden by styles A and B.

I read that !important only prevents overriding css with inline style, but does not prevent overriding other css.

How can I mark style C as the strongest?

Answer 1

Increase the specificity of rule C above rule rules A and B. Normally, I would include some explanation here, but one of them on the linked site is excellent.

Answer 2

Announcement ! important provides a way for the author of a stylish table to give CSS more weight than it naturally has. It should be noted here that the phrase “! Important declaration” is a reference to the entire CSS declaration, including the property and value, with! Important added.

Here is a simple code example that clearly illustrates how! it is important to influence the natural way styles are applied:

 #example { font-size: 14px !important; } #container #example { font-size: 10px; } 

In the above code example, an element with the identifier "example" will have a text size of 14px, due to the addition of an important one.

Answer 3

!important should work fine, but if not, you can link your classes in your declaration like this:

div.ac,div.bc,div.abc { color:red }

Answer 4

 div.a, div.b { background-color: #00f; } div.c { background-color: #f00 !important; } 

!important will be the priority of the rule, and inheritance will be ignored.

Answer 5

 div.a, div.b, div.c { background-color: #00f; } div.c { background-color: #f00; } 

should work, CSS is consistent. This means that the last style for this element does not apply to a specific style. More specific would be, for example,

 body div.c { background-color: #f00; }