Nie. Nie jest to możliwe za pośrednictwem CSS. „Kaskada” bierze sobie do serca ;-).
Jeśli jednak możesz dodać JavaScript do swojej strony, odrobina jQuery może doprowadzić cię do ostatecznego celu.
Możesz użyć jQuery's, findaby wykonać „spojrzenie do przodu” na docelowym elemencie / klasie / id, a następnie cofnąć się, aby wybrać swój cel.
Następnie używasz jQuery, aby ponownie napisać DOM (CSS) dla swojego elementu.
W oparciu o tę odpowiedź Mike'a Branta następujący fragment kodu jQuery może pomóc.
$('p + ul').prev('p')
To najpierw wybiera wszystkie <ul>s, które następują bezpośrednio po <p>.
Następnie „cofa się”, aby wybrać wszystkie poprzednie <p>s z tego zestawu <ul>.
W efekcie jQuery zostało wybrane „poprzednie rodzeństwo”.
Teraz użyj .cssfunkcji, aby przekazać nowe wartości CSS dla tego elementu.
W moim przypadku szukałem sposobu, aby wybrać DIV z identyfikatorem #full-width, ale TYLKO, jeśli miał (pośrednio) potomka DIV z klasą .companies.
Miałem kontrolę nad całym HTMLem .companies, ale nie mogłem zmienić żadnego HTMLa powyżej.
Kaskada idzie tylko w jednym kierunku: w dół.
W ten sposób mogłem wybrać WSZYSTKIE #full-width.
Lub mogłem wybrać, .companiesże tylko po #full-width.
Ale mogę nie zaznaczyć tylko #full-widthy, który przystąpił .companies .
I znowu nie byłem w stanie dodać .companieswyżej w HTML. Ta część HTML została napisana zewnętrznie i otoczyła nasz kod.
Ale dzięki jQuery mogę wybrać wymagane #full-widths, a następnie przypisać odpowiedni styl:
$("#full-width").find(".companies").parents("#full-width").css( "width", "300px" );
Znajduje to wszystko #full-width .companiesi wybiera tylko te .companies, podobne do tego, w jaki sposób selektory są używane do kierowania określonych elementów w standardzie w CSS.
Następnie używa .parents„cofania się” i wybierania WSZYSTKICH elementów nadrzędnych .companies,
ale filtruje te wyniki, aby zachować tylko #fill-widthelementy, tak że ostatecznie
wybiera #full-widthelement tylko, jeśli ma .companiespotomek klasy.
Na koniec przypisuje nową widthwartość CSS ( ) do wynikowego elementu.
$(".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>
Dokumenty referencyjne jQuery:
$ () lub jQuery () : element DOM.
. find : pobierz potomki każdego elementu w bieżącym zestawie dopasowanych elementów, przefiltrowane przez selektor, obiekt jQuery lub element.
. rodzice : Uzyskaj bezpośrednio poprzedzające rodzeństwo każdego elementu w zestawie dopasowanych elementów. Jeśli selektor jest dostępny, pobiera poprzednie rodzeństwo tylko wtedy, gdy pasuje do tego selektora (filtruje wyniki, aby uwzględnić tylko wymienione elementy / selektory).
. css : Ustaw jedną lub więcej właściwości CSS dla zestawu dopasowanych elementów.