Change child element background CSS

Question

I am a novice at CSS, here's HTML structure:

<nav id="navbar" class="navbar navbar-expand-sm">
    <a class="navbar-brand ml-4" href="#">
        <img src="images/logo-light.svg" alt="" width="30" height="90" class="d-inline-block align-top" id="navlogo">
    </a>
    <button class="navbar-toggler collapsed border-0" id="navbar-toggler" type="button">
        <span> </span>
        <span> </span>
        <span> </span>
    </button>
</nav>

What I need to do is if I add a class "black" to navbar I need the css background color on navbar-toggler to turn white. How do I do that with CSS?

I thought it should be like:

. navbar .black .navbar-toggler span{
    background: #000 !important;
}

but it's not working

Maybe `.black > .navbar-toggler{background-color: white;}` – MichaelTr7 Mar 04 '21 at 04:02 — MichaelTr7, Mar 04 '21 at 04:02

score 1 · Accepted Answer · answered Mar 04 '21 at 04:21

You were very close.

By going .navbar .black, you are targeting .black that is inside .navbar. But by doing .navbar.black you are targeting the element that has both .navbar and .black.

.navbar.black .navbar-toggler span{
    background: #FFF!important;
}

score 0 · Answer 2 · answered Mar 04 '21 at 04:14

0

you can use javascript addEventListener

const nav = document.querySeletor('#navbar)
('#navbar_toggler').addEventListener('toggle',function(){
    nav.classList.toggle('bg')
  
})

.bg{
background-color:black;
}

answered Mar 04 '21 at 04:14

Ajinkya

57
3

No need for JS, I want to use CSS – jac Mar 04 '21 at 04:15
if you only want to turn text color white only once, then use class text-light – Ajinkya Mar 04 '21 at 04:24

Change child element background CSS

2 Answers2