0

I want to override the background-color: black !important property on a WordPress project or delete that property but I can't find it in my CSS Files. 

#top-nav > div > ul > li.current-menu-item, #top-nav > div > div > ul > li.current-menu-item, #top-nav > div > ul > li:hover, #top-nav > div > div > ul > li:hover, .top-nav-list > li > ul li:hover, .top-nav-list ul li ul li:hover {
    background-color: #000000 !important;
}
Jonathan Soifer
  • 2,715
  • 6
  • 27
  • 50
Leo Barnabas Elogie
  • 1
  • 1

2 Answers2

0

Find a way to include the rule you want after the rule you're trying to override.

CSS are, by definition, Cascading Style Sheets. That means that the following code:

.divwhatever { background-color: black; } // On WordPress Original File
.divwhatever { background-color: white; } // On WordPress Theme File
.divwhatever { background-color: red !important; } // On WordPress Child Theme
.divwhatever { background-color: orange ! important; } // On a specific File

In the end will be presented with a Orange background.

The last processed rule with always be applied unless there's a previous !important rule.

In that case, the last processed rule with the !important modifier will prevail.

That's a very bad practice: ideally you should find the original rule and change it or, at the very least, have no more than one !important statement for the same DOM model but I know how tough WordPress Themes can be to a beginner :)

Jonathan Soifer
  • 2,715
  • 6
  • 27
  • 50
0

you can override by creating mixin .test{background:red !important;} @mixin test{.test{background: blue !important;} }@include test();

Charan kumbar
  • 1
  • 1