общий последний ребенок в структуре вложенного div

Question

У меня есть следующая структура HTML-файла

text {
  p {
    margin-bottom: rem(22);
    &:last-child {
      margin-bottom: 0;
    }
  }
}

<div class="text">

  <div class="one">
    <p>bla</p>
    <p>bla</p>
  </div>
  <div class="two">
    <p>bla</p>
  </div>
  <div class="three">
    <p>bla</p>
  </div>

</div>

С последним ребенком я хочу получить только самого последнего ребенка р. В этом случае <p> в div class="three".

Но с помощью этого кода я всегда делаю нижнее поле для каждого последнего потомка в соответствующем div (один, два, три, ... и т. Д.).

Так есть ли решение, получить только самого последнего потомка (<p>) из div "text"?

Я ищу решение, которое найдет последнюю букву p и добавит нижнюю границу только к этому

Answer 1

В этом конкретном случае селектор должен быть

.text > div:last-child > p:last-child { ... }

или в SCSS

.text {
     p {
       margin-bottom: rem(22);
     }
     div:last-child {
        p:last-child {
          margin-bottom: 0;
        }
    }
 }

}