CODEWITHSUNDEEP
htmlcss
gdoron
gdoron

Reputation: 150253

How to stop my css declaration from being overridden

I have a div with classes of A B C
I added a style to c to show the color as "Red";
The problem is it's overridden from the styles of A and B.

I read that !important only prevents the css being overridden by the inline style but does not prevent the override by other css.

How do I mark the style of C as the strongest?

Upvotes: 5

Views: 10007

Answers (5)

albert
albert

Reputation: 8153

!important should work just fine, but if not you can chain your classes in your declaration like so:

div.a.c,div.b.c,div.a.b.c { color:red }

Upvotes: 0

Rohan Patil
Rohan Patil

Reputation: 2348

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

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

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

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

In the above code sample, the element with the id of “example” will have text sized at 14px, due to the addition of !important.

Upvotes: 1

Ben
Ben

Reputation: 13615

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

should work, CSS is sequential. This means the last style for that element is applied of no more specific style is available. More specific would be for example

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

Upvotes: 0

balkon_smoke
balkon_smoke

Reputation: 1196

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

The !important will up priority of rule and inheritance will be ignored.

Upvotes: 0

Jon
Jon

Reputation: 437346

Increase the specificity of rule C above that of rules A and B. Normally I would include some explanation here, but the one over at the linked site is superb.

Upvotes: 9

Related Questions