CSS Изменить фоновый родительский элемент

Question

У меня есть проблема, которую я хочу изменить с помощью css

<div class="a">
  <div class="b">
    <span></span>
  </div>
  <div class="c">
   <span></span>
  </div>
  <div class="d">
   <span class="e"></span>
  </div>
</div>

Я хочу изменить фон div.b и div.c, используя span.e
Пожалуйста, помогите мне.
Спасибо

Answer 1

В настоящее время CSS не может идти вверх по цепочке (дочерний к родительскому) только вниз по цепочке (родительский к дочернему). Вероятно, вы могли бы использовать jQuery, чтобы делать то, что вы хотите здесь, но вам, вероятно, следует переписать HTML-код, чтобы это не сложно.

Answer 2

Вы не можете сделать это с помощью CSS, вам нужно что-то вроде jQuery. Трудно точно сказать, что предложить, поскольку неясно, как вы хотите, чтобы система работала, но это должно помочь:

$('.e').parents('div').eq(0).addClass('red');

У вас уже есть класс в вашем CSS: .red { background-color: red; } (хотя вы можете назвать его лучше).

Answer 3

В следующем ответе предполагается, что вы спрашиваете, как использовать span.e как часть селектора для изменения правил для div.b и div.c. Например:

span.e:parent:prevAll.b { background:red } // concept-code, doesn't actually work

Вы не можете сделать это только с помощью CSS, вам нужно использовать что-то вроде jQuery (javascript), чтобы справиться с этим за вас. С помощью CSS вы можете ссылаться на детей от родителей, но не на родителей от детей. Или в этом случае дяди из племянников ...