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.
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.
order of precedence in css:
and selector precedence is:
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
}
Use !important!important behind the rule you want to accomplish.
li.M3 {
font-size: 100px !important;
}
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;
}
