пытаясь нацелить дочерние элементы, используя мой родительский класс firstRow

Question

• Я пытаюсь настроить таргетинг на дочерние элементы, используя родительский класс firstRow .
• , но я не успешен.
• Я посмотрел на приведенный ниже cssСелекторы, а затем только я реализовал, но до сих пор я не могу целиться.https://www.w3schools.com/csSref/css_selectors.asp
• можете ли вы сказать мне, как это исправить, чтобы в будущем я все исправил сам.
• предоставив мой фрагмент кода и песочницу ниже

.firstRow div:nth-child(2) {
  background: green;
  width: 40px;
  height: 100px;
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div class="firstRow">
  <div>
    <p>test.</p>
    <p>test 2.</p>
  </div>
</div>

Answer 1

:nth-child(n) дочерний элемент n^th родительского элемента текущего элемента, поэтому вместо него можно использовать .firstRow p:nth-child(2).

Answer 2

.firstRow div:nth-child(2) {
  background: green;
  width: 40px;
  height: 100px;
  border: 1px solid black;
}

<div class="firstRow"> <!-- parent -->
  <div> <!-- this is nth-child(1) -->
    <p>test.</p>
    <p>test 2.</p>
  </div>
  
  <div></div> <!-- this is nth-child(2) -->
</div>

Answer 3

Дочерний объект, на которого вы пытаетесь нацелиться, является элементом p, а не элементом div:

.firstRow p:nth-child(2) {
  background: green;
  width: 40px;
  height: 100px;
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div class="firstRow">
  <div>
    <p>test.</p>
    <p>test 2.</p>
  </div>
</div>