CSS matching predecessor

Question

Let's say I have a simple structure:

<div id="a"></div>
<div id="b"></div>

If #b has class .test, I want to set #a { display: none; }. Are there any css tricks to acomplish this? We can assume that they are the only childs of their parent.

Answer 1

Sorry, there is no way to select the previous sibling with pure CSS.

If you are up to using the flexbox layout, you could re-arrange the visual order of your two elements, then use the adjacent sibling selector to select the item that is visually first.

For example:

<style>
  #a { order: 0; }
  #b { order: -1; }
  #a + #b { color: red; }
</style>
<div style='display: flex; flex-direction: column;'>
  <div id='a'>Hi</div>
  <div id='b'>Bye</div>
  <div>Three</div>
</div>

http://jsfiddle.net/ag266f52/1/

Answer 2

Apologies long day and didnt read correctly.

If there are only 2 items in the parent you can use :not()

e.g.

html

<div class="blue">
  <div id="a">hi</div>
  <div id="b" class="test">his</div>
</div

css

.blue > :not(.test) {
    color: red;    
 }