how to override !important in the css

Question

I would like to change the css but I can't override the defaults. My page code is `

<h1 class="page_title">Today's Top Ten Videos</h1>              
<div id="main_inner">
<div class="top-layout"><div class="top-layout-row">
<div class="top-layout-cell"><h4 class="top-video-title">
 <a href="http://xxx">Title</a></h4>

The following css is across the site and I can't change it. :

#main_inner h4, #main_inner h4 a{
 letter-spacing: 0;
  line-height: 155%;
  font-weight: bold !important;
  background-color: #f5f3f3 !important;
  color: #006c9f !important;
  text-transform: none !important;
}
#main h4:before, footer .widgettitle:before, h1.page_title:before, #sidebar h4.widgettitle:before, .about_author_title:before, #reply-title:before, #comments_title:before {
  content: "|||";
}

I'm trying to change the css to h4.top-video-title{background-color:none !important;} h4.top-video-title ::before{ content: "";}

but it isn't working. How do I change the css?

score 1 · Answer 1 · answered Mar 21 '15 at 19:36

1

You can use CSS Specificity to do the override. Use more selectors than the ones used in the legacy code you found on the site.

For instance:

#main_inner h4, #main_inner h4 a{
 letter-spacing: 0;
  line-height: 155%;
  font-weight: bold !important;
  background-color: #f5f3f3 !important;
  color: #006c9f !important;
  text-transform: none !important;
}
#main h4:before, footer .widgettitle:before, h1.page_title:before, #sidebar h4.widgettitle:before, .about_author_title:before, #reply-title:before, #comments_title:before {
  content: "|||";
}

If you want to override:

#main_inner h4

you need to use more selectors or a higher selector since they used an id.

Try

#main_inner h4.top-video-title{
   background-color:none !important;
}

I wrote a post about this a while ago: http://blog4coders.com/css-specificity/

answered Mar 21 '15 at 19:36

Alessandro Incarnati

7,018
3
38
54

1

That's the correct answer, it is all about specificity! – dippas Mar 21 '15 at 19:41
Yes dippas, indeed :) – Alessandro Incarnati Mar 21 '15 at 19:41
It isn't changing the actual color behind the text letters, only the background around the text. – LTech Mar 21 '15 at 20:35
If it doesn't change that it means either the specificity it's still not higher or there is another inner div with background color set. Try background:transparent; as well to see what happens. – Alessandro Incarnati Mar 21 '15 at 20:37
To increase specificity just add more parent div classes to the selector for example. – Alessandro Incarnati Mar 21 '15 at 20:38

score 0 · Answer 2 · answered Mar 21 '15 at 19:35

It seems to be the CSS priority, as the others have nested selectors. Try to use the same selectors as the existing ones, but adding body before:

body #main_inner h4, body #main_inner h4 a

and !important to the rule too, so you can increase the selector priority.

score 0 · Answer 3 · answered Mar 21 '15 at 19:36

0

Instead of none, use Transparent !important

h4.top-video-title { 
 background-color: Transparent !important;
}

answered Mar 21 '15 at 19:36

Spooky

1,235
15
17

this doesn't override the #main_inner – LTech Mar 23 '15 at 08:12
Yes, but there is no 'none' as color value. Only transparent or valid color value/name. – Spooky Apr 08 '15 at 07:53

how to override !important in the css

3 Answers3