Why submenu item's background color is not changing by css?

Question

I am developing child theme based on Accelerate by ThemeGrill. I am trying to change submenu item's background color. However it is not affacted by any selector.

I have tried to add following to Additional CSS options:

*{
    color: #00df00 !important;
    background-color: #50df50 !important;
    background-image: none !important;
}

This results in every item in the page to be green except submenu's backgroud which is still gray. However text of the submenu items were changed, so the submenu items are partialy affected by this css.

Why is the background color of submenu items not changing?

Answer 1

CSS is a game of competing priorities. When two rules conflict, whichever one has the higher specificity wins.

If you have these rules and something is not affected by it, then something else has a higher specificity.

Since you have specified the !important tag, whatever is trumping you is also using the !important tag. Then it is trumping you by also having a higher specificity in another way (or even just by coming after yours).

You need to inspect the element and find out the source of your competition, then write a rule to trump it.

The difficulty in trumping !important tags is the precise reason they are absolutely not recommended.

No one else can diagnose this further without seeing the actual page where it is happening (since you don't know where the other style rules are coming from).