Cóż, to pytanie zadawane jest już wiele razy, a krótka typowa odpowiedź brzmi: nie można tego zrobić za pomocą czystego CSS. Jest w nazwie: Kaskadowe arkusze stylów obsługują stylizację tylko w kierunku kaskadowym, a nie w górę.
Ale w większości przypadków, w których pożądany jest ten efekt, jak w podanym przykładzie, nadal istnieje możliwość wykorzystania tych kaskadowych charakterystyk, aby osiągnąć pożądany efekt. Rozważ ten pseudo znacznik:
<parent>
<sibling></sibling>
<child></child>
</parent>
Sztuczka polega na tym, aby dać rodzeństwu taki sam rozmiar i pozycję jak rodzic i nadać styl rodzeństwu zamiast rodzica. To będzie wyglądać tak, jakby stylizowany był rodzic!
A teraz, jak wystylizować rodzeństwo?
Kiedy dziecko unosi się w powietrzu, rodzic również, ale rodzeństwo nie. To samo dotyczy rodzeństwa. To kończy się trzema możliwymi ścieżkami selektorów CSS do stylizacji rodzeństwa:
parent sibling { }
parent sibling:hover { }
parent:hover sibling { }
Te różne ścieżki dają kilka fajnych możliwości. Na przykład uwolnienie tej sztuczki na przykładzie w pytaniu skutkuje następującymi skrzypcami :
div {position: relative}
div:hover {background: salmon}
div p:hover {background: white}
div p {padding-bottom: 26px}
div button {position: absolute; bottom: 0}
Oczywiście w większości przypadków ta sztuczka polega na zastosowaniu pozycjonowania absolutnego, aby nadać rodzeństwu taki sam rozmiar jak rodzic, a jednocześnie pozwolić dziecku pojawić się w nim.
Czasami konieczne jest użycie bardziej kwalifikowanej ścieżki selektora, aby wybrać określony element, jak pokazano na tym skrzypcach, które implementują tę sztuczkę wiele razy w menu drzewiastym. Całkiem niezłe.