Как применить стили для внутреннего элемента nth childs?

Question

.outer:nth-child(3) > div{
   color:red;
}

<div class="outer">
  <div>1st deep element</div>
  <div>1st deep element</div>
  <div>
    <div>2nd deep element</div>
  </div>
</div>

Как управлять стилем 2-х глубоких элементов только с помощью селектора внешнего класса?

Answer 1

Цель таким образом

.outer div:nth-child(3)

.outer div:nth-child(3) > div{
   color:red;
}

<div class="outer">
  <div>1st deep element</div>
  <div>1st deep element</div>
  <div>
    <div>2nd deep element</div>
  </div>
</div>

Answer 2

Вы применяете :nth-child селектор псевдокласса к классу .outer, поэтому разделите его прямым дочерним селектором >.

.outer > :nth-child(3) > div{
   color:red;
}

<div class="outer">
  <div>1st deep element</div>
  <div>1st deep element</div>
  <div>
    <div>2nd deep element</div>
  </div>
</div>

Answer 3

используйте это

.outer div:nth-child(3)>div:nth-child(1){
   color:red;
}

Answer 4

Элемент div, которым вы хотите управлять, является дочерним по отношению к другому элементу div, поэтому вы должны сначала перейти от родителя к потомку, а затем выбрать там дочерний элемент. просто !! @@ #

div>div:nth-child(2){
   color:red;
}

<div class="outer">
  <div>1st deep element</div>
  <div>1st deep element</div>
  <div>
    <div>2nd deep element</div>
  </div>
</div>

Answer 5

Я делаю для тебя скрипку.

https://jsfiddle.net/gnfkqj1y/

.outer >div:nth-child(3)  > div{
   color:red;
}