CODEWITHSUNDEEP
htmlcss
Jim
Jim

Reputation: 1005

override css style on element

So I have an element in my html that I need to apply a special style for. I can target the elemnt with css but it gets overriden multible other places in css. How do I ensure that one style is applied instead of the other?

I tried using !important in my css, but it still won't work.

I am talking about 

 ul.M1 li.M3 {
    font-size:13px;
 }

but this one is not used instead this is used:

li.M3 {
    font-size: 100px;
}

and it gets overriden a bunch of other places too.

Upvotes: 0

Views: 105

Answers (4)

Mister Epic
Mister Epic

Reputation: 16713

You should be able to use !important without issue:

 ul.M1 li.M3 {
    font-size:13px !important;
 }

But I recommend not doing that. I try to avoid using !important at all costs. The reason is that once it is applied, it is very difficult to un-apply it. This can lead to some significant issues with maintenance.

I would recommend leveraging specificity instead to apply your style. Learn to love your browser's developer tools, and use them to identify the style that is being applied, and the selector that is applying it.

Then, create a new, slightly more specific selector that will carry more weight. For instance, if you apply an ID to your ul, you could leverage that to build a more specific selector that should win out:

ul#myID li.M3 {
   font-size:13px !important;
}

Upvotes: 0

Nitesh
Nitesh

Reputation: 15739

Correct your spelling and use !important instead of !importent.

For Instance,

ul.M1 li.M3 {
    font-size:13px !important; 
 }

Declare it at the very last of your stylesheet and link that stylesheet in your page at the very end of </head>.

Hope this helps.

Upvotes: 7

Zaheer Ahmed
Zaheer Ahmed

Reputation: 28528

order of precedence in css:

  • Inline styles
  • Embedded styles
  • External styles

and selector precedence is:

  • ID selector
  • attribute selector
  • class selector
  • child selector
  • adjacent sibling selector
  • descendant selector
  • type selector

but !important has the highest priority and if two or more rules has !important then precedence will be as above. 

ul.M1 li.M3 {
    font-size:13px; !important
 }

Upvotes: 1

Gaucho_9
Gaucho_9

Reputation: 265

Use !important!important behind the rule you want to accomplish.

li.M3 {
   font-size: 100px !important;
}

Upvotes: 0

Related Questions