Цель только первый прямой ребенок не работает, несмотря на: nth-child (1)

Question

Так что в основном у меня есть эта разметка, которая представляет собой очень упрощенный вывод компонента, над которым я работаю.

В CSS я просто хочу стилизовать (применить серый цвет) первого прямого потомка,но он также применяет стиль к косвенным вложенным дочерним элементам, несмотря на добавление nth-child(1).Почему это?И как я могу это исправить?

.row {
margin: 5px 0;
}

.row.row-selected{ border-left: 1px solid red; }

.row.row-selected .row-data:nth-child(1) {
    background-color: #d5d5d5;
}

<div class="row row-selected">
  <div class="row-data">Foo1</div>
 
  <div class="row" style="margin-left: 20px">
    <div class="row-data">Foo1Child1</div>
  </div>
 
  <div class="row" style="margin-left: 20px">
    <div class="row-data">Foo1Child2</div>
  </div>
 
</div>

<div class="row">
  <div class="row-data">Foo2</div>
 
  <div class="row" style="margin-left: 20px">
    <div class="row-data">Foo2Child1</div>
  </div>
 
  <div class="row" style="margin-left: 20px">
    <div class="row-data">Foo2Child2</div>
  </div>
 
</div>

Answer 1

Применяется ко всем вложенным элементам, потому что вы используете комбинатор потомков (пробел) между селекторами:

.row.row-selected .row-data:nth-child(1) { }

Этот комбинатор нацелен на всех указанных потомков (не только потомков)) первого селектора.

Кроме того, целевой элемент (.row-data) фактически является первым дочерним элементом (:nth-child(1)) родительского элемента во всех случаях.

Вместоиспользуйте дочерний комбинатор (>), который нацелен только на дочерние элементы элемента.

.row.row-selected > div:nth-child(1) {
  background-color: #d5d5d5;
}

.row {
  margin: 5px 0;
}

.row.row-selected {
  border-left: 1px solid red;
}

<div class="row row-selected">
  <div class="row-data">Foo1</div>
  <div class="row" style="margin-left: 20px">
    <div class="row-data">Foo1Child1</div>
  </div>
  <div class="row" style="margin-left: 20px">
    <div class="row-data">Foo1Child2</div>
  </div>
</div>

<div class="row">
  <div class="row-data">Foo2</div>
  <div class="row" style="margin-left: 20px">
    <div class="row-data">Foo2Child1</div>
  </div>
  <div class="row" style="margin-left: 20px">
    <div class="row-data">Foo2Child2</div>
  </div>
</div>

Answer 2

Я думаю, что вы ищете родительский / дочерний селектор?

.row.row-selected > .row-data {
    background-color: #d5d5d5;
}

Это гарантирует, что выбран только прямой дочерний элемент .row.row-selected с классом .row-data.