Пользовательский CSS на элементе в зависимости от состояния дочернего элемента в предыдущем элементе родственного элемента

Question

Мне нужно стилизовать элемент span, но только когда активен дочерний элемент в предыдущем элементе div брата (т. Е. Установлен переключатель).

Я не могу изменить код.Можно использовать только CSS.

Есть мысли?

<label class="One">
    <span class="Two">
        <div class="Three">
            <input class="Four" type="radio">
            <a class="Five ui-state-default"></a>
        </div>
        <span class="Six">Don't highlight this</span>
    </span>
</label>
<label class="One">
    <span class="Two">
        <div class="Three">
            <input class="Four" type="radio">
            <a class="Five ui-state-active"></a>
        </div>
        <span class="Six">Highlight this</span>
    </span>
</label>

• нужно выделить span.Six, но только когда a.Five показывает "ui-state-active".

Альтернативой, если проще, является то, что я мог бы вместо этого выделить элемент метки (т. Е. Второй «label.One» выше), но опять же только , если дочерний элемент 3 уровня ниже равен «active ".......

Ценю помощь

Answer 1

Учитывая условия, по которым вы не можете вносить изменения в код и должны использовать только CSS, ожидаемый результат невозможен.Вы можете использовать Javascript или изменить HTML.Но вы можете воспользоваться помощью псевдоэлементов, чтобы почти достичь того, что вы хотите.Содержимое псевдоэлементов может быть изменено в соответствии с правилами CSS.

input:checked~a:after {
  content: "I am active";
  display: block;
  color: red;
}

Вот демонстрация того, что я предлагаю: http://jsfiddle.net/GCu2D/3626/

Вы можете стилизовать псевдоэлементы влюбым способом.

В случае JavaScript вы можете начать отсюда:

 $(document).ready(function() {
  $("input").on("change", function() {
    var elem = $(this);
    elem.parents("label:first").find(".Six").toggleClass("active")
  });
});

Демо: http://jsfiddle.net/GCu2D/3628/