0

I have a website that adds classes to the body tag when menus are open. There is a right menu and a left menu. When both are open, it’s causing some width issues with my central column. I am trying to get a parent class that does something like this:

When left-menu and right-menu classes are in the body tag, then I want to change central-column.

I can’t get it to work because left-menu and right-menu are at the same parent level, they are not nested. So, when I have both classes specified, it fails because I can’t find a way to specify two things that are equal and not in a cascade.

.left-menu .right-menu .central-column {margin: 0 !important;}

That does not work, but I can specify when one of the menus are open, for example these all work:

.left-menu .central-column,
.right-menu .central-column {margin: 0 !important;}

I tried things like this and none worked.

.left-menu .right-menu {.central-column {margin: 0 !important;}}

.left-menu & .right-menu .central-column {margin: 0 !important;}

body[class="left-menu"][class="right-menu"] .central-column {margin: 0 !important;}

body[attr="left-menu"][class="right-menu"] .central-column {margin: 0 !important;}

Can anyone help with this?

Ie Gee
  • 9
  • 1
  • Can you post your HTML? I assume you can use the [tilde selector](https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors), but that will only work if you have central-menu at the end, and on the same level than left and right menues. – Jorjon Jul 13 '18 at 01:28

2 Answers2

2

When classes are on the same element, you need to combine the selectors. For example:

<body class="left-menu right-menu">

then to get your .central-column affected when those classes appears together, you need to combine the selectors on your CSS like .left-menu.right-menu (note that there is no space between classes)

.left-menu.right-menu .central-column {
   margin: 0 !important;
}

See docs, Class Selectors

caiovisk
  • 3,667
  • 1
  • 12
  • 18
  • That solved it. THANK YOU. I would kiss you if I could. This is genius. Thank you. ...how come I can’t find that anywhere on teaching websites for CSS? – Ie Gee Jul 13 '18 at 01:51
  • Glad it worked! you can now select the answer as right :) – caiovisk Jul 13 '18 at 02:26
0

If I understand you problem correctly, right-menu and left-menu are at the same level, but central column is nested below them.

In which case, all you want to do is write

.left-menu.right-menu .central-column

By leaving a space after .left-menu the next class you write will be interpreted as "anything that is a child of the elements with class left-menu and that has this class". But with no space, you are selecting everything that has both classes.

Jolanda
  • 173
  • 6