0

I'm working on a wordpress theme, using Mamp Local Server and SCSS to compile CSS.

I have a JS script for menu interaction because my menu has sub-menus.

This is before script:

<ul>
    <li></li>                            //level 0 
    <li></li>                            //level 0  
    <li>                                 //level 0 
        <ul class="children">            //level 1
            <li></li>
            <li></li>
        </ul>
    </li>  
    <li></li>                            //level 0 
</ul>

And this is after script:

<ul>
    <li></li>                            //level 0 
    <li></li>                            //level 0  
    <li>                                 //level 0 
        <ul class="children toggled-on"> //level 1
            <li></li>
            <li></li>
        </ul>
    </li>  
    <li></li>                            //level 0 
</ul>

So I set an SCSS rule like this:

.toggled-on {
   display:block;
}

but the element doesn't get the style.

If I change the SCSS rule to this it works:

.children.toggled-on {
   display:block;
}

From what I've learned about CSS it should work in both cases.

Where am I going wrong?

IMSoP
  • 89,526
  • 13
  • 117
  • 169
Jacopo Marrone
  • 77
  • 1
  • 10
  • 2
    there is for sure another CSS rule overiding the first one and you fixed the issue by increasing its specificity – Temani Afif May 10 '19 at 14:19
  • Yes, try `.toggled-on.toggled-on { display:block; }` and if the rule applies, it's a specificity problem – elveti May 10 '19 at 14:20
  • @elveti It works! i did'nt know that it possible to duplicate class to increase specificity.. thank you for this trick ! This is my first question here on StackOverflow, i need to delete it because is a duplicate? – Jacopo Marrone May 10 '19 at 18:32

1 Answers1

0

As the comments on your original post already suggest, it is probably a specificity problem where another CSS rule is overriding your own.

My Hint: In Firefox you can press Ctrl+Shift+I to open the Inspector. There you can toggle Pseudo Classes like shown in this image:

Inspect Element

Then you can see if some other rule is overriding your own CSS rule.

(for example: in the picture shown, min-width of 1264 for html,body is overridden by min-width: auto;) - you can see it is crossed out.

TylerH
  • 20,799
  • 66
  • 75
  • 101
DigitalJedi
  • 1,577
  • 1
  • 10
  • 29
  • The problem is that i took a too short look in the inspector , because the rule i set was really deep in the tree, i havent noticed ! Be less lazy, that the point :) This is my first question here on StackOverflow, i need to delete it because is a duplicate? @DigitalJedi – Jacopo Marrone May 10 '19 at 18:36
  • @tresor I dont think deleting is necessary. If its a duplicate a moderator will probably take care of it. – DigitalJedi May 13 '19 at 07:21