How to select the parent element with CSS?

Asked Nov 03 '20 at 16:48

Active Nov 03 '20 at 17:07

Viewed 17 times

I have HTML structure that looks like this:

<div class="c-wrapper c-sidebar-fixed">
    <div class="c-sidebar">
        Side Bar Menu
    </div>
</div>

The current CSS code was designed when the side bar div was outside of the c-wrapper. Now I moved the sidebar inside of wrapper. How this CSS can be adjusted to work with the current html structure?

@media (min-width: 992px) {
  html:not([dir="rtl"]) .c-sidebar.c-sidebar-fixed ~ .c-wrapper {
    margin-left: 256px;
  }
  *[dir="rtl"] .c-sidebar.c-sidebar-fixed ~ .c-wrapper {
    margin-right: 256px;
  }
}

I'm not sure what is the most efficient way to select the parent element c-wrapper. If you have any suggestions please let me know.

edited Nov 03 '20 at 17:07

asked Nov 03 '20 at 16:48

espresso_coffee

5,076
9
53
124

@DBS Thanks for clarification. Is there alternative solution for this situation? – espresso_coffee Nov 03 '20 at 16:52
you would need to apply the fixed class directly to the parent or just have the margin left on the child - shouldn't make any difference unless there are other things in the wrapper – Pete Nov 03 '20 at 16:55
@Pete Can you provide example? Thank you. – espresso_coffee Nov 03 '20 at 16:55
not really - you haven't shown what adds the class – Pete Nov 03 '20 at 16:56
@Pete What class? The css will apply based on the media query. – espresso_coffee Nov 03 '20 at 16:57
`c-sidebar-fixed` - that class doesn't exist in your html – Pete Nov 03 '20 at 16:58
@Pete Now exists. – espresso_coffee Nov 03 '20 at 17:07

How to select the parent element with CSS?

0 Answers0