Question

I’m trying to target the first div block that wraps “Target”.

<div class="box-content">
<div>
    <div>Target</div>
    <div>xxxx</div>
    <div>xxxx</div>
    <div>xxxx</div>
    <div>
       <div>Unwanted</div>
       <p>xxxx</p>
    </div>
</div>

I tried;

div.box-content div div:nth-child(1)  {
display:none;
}

and

div.box-content div div:first-child {
display:none;
}

but it removes the div that wraps “Unwanted” too. How can I target only the first one that wraps “Target”

Answer 1

You want to select the direct children, like:

div.box-content > div > div:first-child {
  display:none;
}

Your original code selects any div:first-child, who has a div as an ancestor (not a necessarily a direct parent), which also is an ancestor of div.box-content… in other words, there’s no constraint to just your Target and Unwanted also falls into this.

The code above uses the > selector, which says div:first-child should be styled only when it is a direct child of a div, which is also a direct child of div.box-content