How to change font color on child when parent class is added by jquery?

Question

I have jquery sticky.js script to stick menu on scroll.

I want to change font color when sticky element .is-sticky, and back to normal color when .is-sticky is removed.

So i have this markup

<div id="sticky-wrapper" class="sticky-wrapper **is-sticky**">
    <div id="menu">
        <ul class="menu">
            <li><a href="#" title="xxx">XXX</a></li>
            <li><a href="#" title="xxx">YYY</a></li>
            <li><a href="#" title="xxx">ZZZ</a></li>
        </ul>
    </div>
</div>

CSS

#sticky-wrapper .menu > li > a {color: #fff;}
#sticky-wrapper > .is-sticky .menu > li > a {color: #000;}

Does not work... Or maybe css will not support this case correctly?

EDIT. IMHO it's not the same question, and example case is better to understand for beginners.

Where does your is-sticky class is added? – Axnyff Feb 12 '18 at 10:12 — Axnyff, Feb 12 '18 at 10:12

score 1 · Accepted Answer · answered Feb 12 '18 at 10:10

1

Change css rule to

#sticky-wrapper.is-sticky .menu > li > a {color: #000;}

answered Feb 12 '18 at 10:10

programtreasures

4,202
1
9
27

So " > " make that large difference! Many thanks! :) Have a nice day and V for this answer! – PipBoy2000 Feb 12 '18 at 10:14
@PipBoy2000 please accept the answer if it helps you – programtreasures Feb 12 '18 at 10:17
Sure mate! SO have 10 min threshold from question to accept :) – PipBoy2000 Feb 12 '18 at 10:22
@PipBoy2000 welcome:) – programtreasures Feb 12 '18 at 10:26

How to change font color on child when parent class is added by jquery?

1 Answers1