CSS Selector cho trẻ em của anh chị em ruột tử

Question

Nếu tôi đã nhận điều này:

<div class="parent"> 
    <a href="#" id="trigger">Trigger</a> 
</div> 
<div class="sibling"> 
    <div id="change">Hello</div> 
</div> 

Có một selector để lấy #change khi #trigger đang bay lượn trên?

Giống như khi di chuột của #trigger, hãy thay đổi nền của phần tử #change của .sibling.

Tôi đang tìm một giải pháp CSS thuần túy mà không cần javascript.

Answer 1

Trong một từ: no.

Với cấu trúc hiện tại của HTML của bạn (và trạng thái hiện tại của bộ chọn CSS), điều này là không thể. Có lẽ chúng tôi sẽ nhận được một cái gì đó như thế này trong CSS4, nhưng traversal như thế này là tốt nhất còn lại lên đến Javascript.

Bạn rõ ràng là có thể cơ cấu lại đánh dấu của bạn, và sử dụng bộ chọn anh chị em:

HTML

<div class="parent"> 
    <a href="#" id="trigger">Trigger</a> 
    <div class="sibling"> 
     <div id="change">Hello</div> 
    </div> 
</div> 

CSS

#trigger:hover + .sibling #change { 
    color:red; 
} 

codepen

Answer 2

Không. Bạn không thể đạt được điều này chỉ sử dụng CSS. Javascript là một lựa chọn tốt trong trường hợp này ..

Bạn tuy nhiên có thể phát hiện .parent bị dao động (trong đó sẽ giải quyết vấn đề của bạn nếu phụ huynh xung quanh hoàn toàn kích hoạt):

.parent:hover + .sibling div#change{background:red;} 

(markup giữ nguyên jsFiddle)