Can I detect element visibility using only CSS?

It depends on what you mean by "next to it". You can select an element by visibility using attribute-selectors. Or from here:

The CSS attribute selector matches elements based on the presence or value of a given attribute.

To access an element by visibility, you can use for instance the substring matching attribute-selector star [att*=val]. Supposing the style of the div was hidden using visibility: hidden;:

div[style*="hidden"] {

}

Now the question is how do you access the element "next to it". If the element you try to target comes directly after the hidden one (within same parent) use the + selector:

div[style*="hidden"] + span {

}

If it's before, you are out of luck but can look for some work around in the answers to this question: Is there a "previous sibling" CSS selector?


No, it is not possible and can't be possible, at least in stylesheets.

Otherwise, you could create an infinite loop:

element:visible {
  display: none;
}

The element would be visible at first, then the selector would select it and hide it, then the selector wouldn't apply and it would become visible again, etc.

It would be possible to allow that pseudo-class only in JS APIs like querySelector. But as far as I know there isn't anything like that, and it wouldn't be CSS-only.

Tags:

Css

Sass