Adjacent sibling matches elements with display: none

Question

I have quite a simple bit of CSS formatting - or so I thought!

I have two adjacent elements, the first of which can be hidden. I've used display: none to hide it.

The second element is always present.

I need to maintain a space between the two, so I thought the following bit of CSS would be sufficient:

.hidden + .visible {
    margin-left: 200px;
}

However, it seems that although the first element has display: none applied, the selector is still matches the second element as adjacent (not first), so applies the margin.

Aside from finding it quite 'odd', I need to find a way of keeping a space between the two, but only when both are visible.

Any ideas?

There's a snippet attached with an example.

.container {
  margin: 50px;
}
.wrapper {
  background-color: aqua;
  display: flex;
  justify-content: flex-start;
}
.item {
  background-color: red;
  flex: 0 0 auto;
  height: 40px;
  width: 40px;
}
.hidden {
  display: none;
}
.visible {
  background-color: lime;
}
.hidden + .visible {
  margin-left: 200px;
}

<div class="container">
  <div class="wrapper">
    <div class="item hidden">hidden</div>
    <div class="item visible">visible</div>
  </div>
</div>

you can use attribute selector but style tag is only work if you have inline CSS — Nisharg Shah, May 13 '19 at 19:13
@JohnOhara try my solution to use selector `:not(.hidden) + .visible` — TheWandererLee, May 13 '19 at 19:27

TheWandererLee · Accepted Answer · 2019-05-13T19:24:49.417

Change .hidden + .visible to :not(.hidden) + .visible

CSS will continue to apply that class format, regardless of it's display: setting, because the element still exists. And according to this answer I believe there isn't any way for a plain CSS selector to tell something's display is :none unless it is inline.

So let's use their class name in :not(.hidden). See below.

.container {
  margin: 50px;
}
.wrapper {
  background-color: aqua;
  display: flex;
  justify-content: flex-start;
}
.item {
  background-color: red;
  flex: 0 0 auto;
  height: 40px;
  width: 40px;
}
.hidden {
  display: none;
}
.visible {
  background-color: lime;
}
:not(.hidden) + .visible {
  margin-left: 200px;
}

<div class="container">
  <div class="wrapper">
    <div class="item hidden">hidden</div>
    <div class="item visible">visible</div>
  </div>
</div>
<input type="button" value="Show/Hide" onclick="var cn=document.getElementsByClassName('item')[0].className;
  document.getElementsByClassName('item')[0].className=(cn=='item visible'?'item hidden':'item visible');">

Adjacent sibling matches elements with display: none

1 Answers1