Ориентация на div

Question

Я пытаюсь нацелиться на первый блок div, который включает "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>

Я пытался;

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

и

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

но он удаляет div, который также оборачивает "Unwanted".Как я могу нацелиться только на первый, который обернут "Target"

Answer 1

Вы хотите выбрать прямых потомков, например:

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

Ваш исходный код выбирает любого div:first-child, у которого div в качестве предка (не обязательно прямого родителя), чтотакже является предком div.box-content ... другими словами, нет никаких ограничений только для вашего Target, и Unwanted также попадает в это.

Приведенный выше код использует селектор >, которыйговорит, что div:first-child следует стилизовать только тогда, когда это прямой потомок из div, который также является прямым потомком из div.box-content