CODEWITHSUNDEEP
csswordpress
Filipe
Filipe

Reputation: 116

Wordpress Custom CSS not working for specific group of class

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?

Upvotes: 0

Views: 451

Answers (2)

Chrissu
Chrissu

Reputation: 417

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 { ...}

Upvotes: 1

jogesh_pi
jogesh_pi

Reputation: 9782

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;
}

Upvotes: 1

Related Questions