Cannot override a rule, even when using !important

1k Views Asked by furby At 07 March 2017 at 17:54

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 !!!

Original Q&A

There are 3 best solutions below

Johannes On 07 March 2017 at 18:00 BEST ANSWER

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

Roy Bogado On 07 March 2017 at 17:57

Try:

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

Michael Benjamin On 07 March 2017 at 17:57

You would use right 0 !important to override another right declaration. You're using it in an attempt to override another property. That's not how it works. There's no connection because they're two different properties.

If you want the opposite of left: 0, then try left: 100%... or, as @BoltClock mentioned in the comments, left: auto.

Cannot override a rule, even when using !important

There are 3 best solutions below

Related Questions in CSS

Related Questions in CSS-SELECTORS

Related Questions in CSS-CASCADE

Trending Questions

Popular # Hahtags

Popular Questions