Search code examples
csscss-selectorscss-cascade

Cannot override a rule, even when using !important

I must be overseeing something or have some stupid error in my code, but I can't override Class CSS with the ID CSS AND ( blush ) even with adding the loathed !important hack ...

NB: This is a old(ish) WordPress template, still using clearing div for floats, but I have to work with it. Not my choice.

HTML: 

<body id="page-front-page" class="page-template-homepage">

<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Gardens</a></li>
</ul>

<div class="sidebar">
blah
</div>

CSS

#page-front-page > .sidebar {
padding: 0;
position: absolute;
top: 0;
right: 0 !important;
width: 45%;
}

few lines further is 

.sidebar {
width: 280px;
padding: 50px 40px;
position: absolute;
top: 0;
left: 0;
font-size: 0.71em;
font-family: 'BrandonGrotesque-Light';
}

I've even tried swapping places of respective .sidebar CSS , but nothing helps. Simply cannot get right:0; to override left:0;.

Here is the inspector screenshot:

Screenshot sidebar CSS

What am I missing, not seeing, being dumb about? Thanks a lot !!!

Solution

  • This has to do with "specifity": The overriding rule's selector has to be at least as specific as the other one, so you have to use this selector on the second rule:

    #page-front-page > .sidebar {

    (google for "CSS specifity" to learn about the exact importance of the different parts of a selector concerning specifity )

    Addition: Yes, and as Michael_B and BoltClock wrote, you can't override a right parameter with a left parameter, but have to reset the first one to auto