How do I combine ID, and Class together with an active?

Question

I want to create a sidebar and when it is active, I want the wrapper to change its margin-left to 89px to make it responsive.

Is there a way to combine an ID, an active class, and the dashboard wrapper class together? CSS

#sidebar.active .dashboard-wrapper {
   margin-left: 89px;
}

HTML placing

<div class="nav-left-sidebar sidebar-dark" id="sidebar">
    SIDEBAR CONTENTS
</div>

<div class="dashboard-wrapper">
    MAIN CONTENT
</div>

That should work.. that says target something with the class "dashboard-wrapper" that is INSIDE (the space) something with the id "sidebar" AND the class "active" — DanielRead, May 20 '20 at 20:24
It's now working for me. The entire wrapper isn't changing its margin-left when the sidebar button ID is active. :< Maybe there's something wrong with the placement. Here's how it goes: `
SIDEBAR CONTENTS

MAIN CONTENT
` Is there a way to connect it? — Karl John, May 20 '20 at 20:31

score 2 · Accepted Answer · answered May 20 '20 at 20:36

2

.dashboard-wrapper isn't a child of #sidebar, it's sibling. Use + selector.

#sidebar.active + .dashboard-wrapper {
   margin-left: 89px;
}

Or use your current styles and change HTML markup and put .dashboard-wrapper into #sidebar.

<div class="nav-left-sidebar sidebar-dark" id="sidebar">
    SIDEBAR CONTENTS

    <div class="dashboard-wrapper">
        MAIN CONTENT
    </div>
</div>

answered May 20 '20 at 20:36

pavel

26,538
10
45
61

OMG IT WORKED!! THANK YOU!!! – Karl John May 20 '20 at 20:38

How do I combine ID, and Class together with an active?

1 Answers1