Нет. Это невозможно через CSS. Он принимает "Каскад" близко к сердцу ;-).
Однако, если вы сможете добавить JavaScript на свою страницу, немного jQuery поможет вам достичь конечной цели.
Вы можете использовать jQuery findдля «предварительного просмотра» целевого элемента / класса / id, а затем вернуться назад, чтобы выбрать цель.
Затем вы используете jQuery, чтобы переписать DOM (CSS) для вашего элемента.
Основываясь на этом ответе Майка Бранта , может помочь следующий фрагмент jQuery.
$('p + ul').prev('p')
Сначала выбираются все <ul>s, которые сразу же следуют за <p>.
Затем он «возвращается», чтобы выбрать все предыдущие <p>s из этого набора <ul>s.
По сути, «предыдущий брат» был выбран с помощью jQuery.
Теперь используйте .cssфункцию, чтобы передать новые значения CSS для этого элемента.
В моем случае я искал способ выбрать DIV с идентификатором #full-width, но ТОЛЬКО если он имел (косвенный) потомок DIV с классом .companies.
Я контролировал весь HTML-код .companies, но не мог изменить ни один из HTML-кодов над ним.
И каскад идет только в 1 направлении: вниз.
Таким образом я мог выбрать ВСЕ #full-widths.
Или я мог выбрать, .companiesчто только следовал за #full-width.
Но я не мог выбрать только #full-widthто, что продолжалось .companies .
И, опять же, я не смог добавить .companies выше в HTML. Эта часть HTML была написана внешне и обернула наш код.
Но с помощью jQuery я могу выбрать нужные #full-widths, а затем назначить соответствующий стиль:
$("#full-width").find(".companies").parents("#full-width").css( "width", "300px" );
Он находит все #full-width .companiesи выбирает только те .companies, которые похожи на то, как селекторы используются для нацеливания на определенные элементы в стандарте в CSS.
Затем он использует .parents«backtrack» и выбирает ВСЕХ родителей .companies,
но фильтрует эти результаты, чтобы сохранить только #fill-widthэлементы, так что, в конце концов,
он выбирает #full-widthэлемент, только если у него есть .companiesпотомок класса.
Наконец, он присваивает новое значение CSS ( width) результирующему элементу.
$(".parent").find(".change-parent").parents(".parent").css( "background-color", "darkred");
div {
background-color: lightblue;
width: 120px;
height: 40px;
border: 1px solid gray;
padding: 5px;
}
.wrapper {
background-color: blue;
width: 250px;
height: 165px;
}
.parent {
background-color: green;
width: 200px;
height: 70px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<div class="wrapper">
<div class="parent">
"parent" turns red
<div class="change-parent">
descendant: "change-parent"
</div>
</div>
<div class="parent">
"parent" stays green
<div class="nope">
descendant: "nope"
</div>
</div>
</div>
Target <b>"<span style="color:darkgreen">parent</span>"</b> to turn <span style="color:red">red</span>.<br>
<b>Only</b> if it <b>has</b> a descendant of "change-parent".<br>
<br>
(reverse cascade, look ahead, parent un-descendant)
</html>
Справочные документы jQuery : элемент
$ () или jQuery () : DOM.
, find : Получить потомков каждого элемента в текущем наборе соответствующих элементов, отфильтрованных селектором, объектом jQuery или элементом.
, родители : Получить непосредственно предшествующий брат каждого элемента в наборе соответствующих элементов. Если предоставляется селектор, он извлекает предыдущего родного брата, только если он соответствует этому селектору (фильтрует результаты, чтобы включить только перечисленные элементы / селекторы).
, css : установить одно или несколько свойств CSS для набора соответствующих элементов.