How to use Adjacent sibling selectors in css

Question

here is my HTML code:

<div id="main">
    <h1>
        <div class="details-of-family-members">Details of Family Members</div>
    </h1>
    <div class="wrap data">
        <h1> Hello</h1>
    </div>
</div>

Here is my CSS to hide .wrap.data div based on div of class .details-of-family-members which is inside h1 .

Answer 1

In CSS3 there isn't a option to select the parent based on the child.

We got this sittuation: h1 is sibling of .wrap.data , not details-of-family-members .

Therefore, you should add the class details-of-family-members to h1 tag. And then you can:

.details-of-family-members + .wrap.data {
    display:none;
}

 .details-of-family-members + .wrap.data{ display:none; } 

 <div id="main"> <h1 class="details-of-family-members"> <div>Details of Family Members</div> </h1> <div class="wrap data"> <h1> Hello</h1> </div> </div> 

Answer 2

尝试此操作，您将无法通过css基于子对象定位父节点

#main h1:hover + .wrap.data {display:none;}