Wordpress Custom CSS not working for specific group of class

Question

I am trying to override background color of menu current selected li element in Wordpress using aditional custom css in the personalization panel, but it's not working for a specific class.

I hit F12 in chrome to get the element class name, and I reference it, but it works for other classes.

This is working OK, color is changing:
.activity-list.item-list.bp-list  {
    background-color: #ffd6d6;
}

The element is <ul class="activity-list item-list bp-list">

This is Not working, color is not changing:
.bp-personal-tab.current.selected.loading {
    background-color:  green;
}

The element is <li id="groups-personal-li" class="bp-personal-tab current selected loading">

I have searched the internet to try to understand and I get several results saying that with "dots" the style should by applied, so it's becoming hard for me to understand why the first one is working, and the second one is not.

Does the fact that one have a id and the other don't is related?

You need to improve the element's specificity. Here's a good read for it. developer.mozilla.org/en-US/docs/Web/CSS/Specificity — Mel
– Mel, Commented Apr 25, 2019 at 4:52

jogesh_pi · Accepted Answer · 2019-04-25 02:29:24Z

1

Sometimes it depends on what loads after to override the style. Try with !important to override the existing style.

.bp-personal-tab.current.selected.loading {
    background-color:  #5FB97D !important;
}

answered Apr 25, 2019 at 2:29

jogesh_pi

9,7745 gold badges40 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chrissu · Accepted Answer · 2019-04-25 05:14:50Z

1

It is about the specificity of your CSS. There is probably a more specific rule in your themes CSS for this element, so that one is applied instead of yours.

If you can make your selector more specific, it should be applied.

How exactly you can be more specific depends of course on your HTML and on what you want to achieve exactly. If it is about this single element only, you could use the ID for example (which is always more specific than classes).

    #groups-personal-li { ...}

answered Apr 25, 2019 at 5:14

Chrissu

4172 silver badges13 bronze badges

Collectives™ on Stack Overflow

Wordpress Custom CSS not working for specific group of class

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related