Обратиться к первому вложенному Div

Question

Подскажите пожалуйста, если нет классов у див, как обратиться к первому вложенному? В данном случае, у меня применяется стиль ко всем вложенным div.

.reply>div:first {
    background-color: #fff;
    margin-bottom: 6px;
}

<div class="reply">
    <div>
        <div>
            <p>first reply</p>
        </div>
    </div>
</div>

Я хочу применить стиль для первого вложенного div, но чтобы не применялся к следующему.

Answer 1

Есть несколько вариантов как это можно сделать в зависимости от задачи:

Если нужны div-ы, которые вложенны на первом уровне, то можно использовать >

.reply > div {
  border-color: red;
}

div {
  border: 1px solid;
  margin: 10px;
}

<div class="reply">
  <div>
    <div>
      <p>first reply</p>
    </div>
  </div>
  <div>
    <div>
      <p>second reply</p>
    </div>
  </div>
</div>

Если нужен любой первый дочерний элемент, то можно использовать > :first-child

.reply > :first-child {
  border-color: red;
}

div, p {
  border: 1px solid;
  margin: 10px;
}

<div class="reply">
  <p>First paragraph</p>
  
  <div>
    <p>first reply</p>
  </div>
  
</div>

Если нужен div, который первый дочерний элемент, то можно использовать div:first-child

.reply > div:first-child {
  border-color: red;
}

div, p {
  border: 1px solid;
  margin: 10px;
}

<div class="reply">
  <div>
    <div>
      <p>first reply</p>
    </div>
  </div>
  <div>
    <div>
      <p>second reply</p>
    </div>
  </div>
</div>

Если среди всех вложенных дочерних нужен именно первый div, то можно использовать :first-of-type

.reply  div:first-of-type {
  border-color: red;
}

div, p {
  border: 1px solid;
  margin: 10px;
}

<div class="reply">
  <p>First paragraph</p>
  
  <div>
    <p>first reply</p>
  </div>
  
</div>

БЛОГ НА HUSL

Обратиться к первому вложенному Div

Ответы (1 шт):