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

У меня следующая структура 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. В этом случае <p> в div class = "three".

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

Так есть ли решение получить только самый последний дочерний элемент (<p>) "текста" div?

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

html css sass css-selectors frontend

30.10.2018 17:18

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

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

или в SCSS

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

}

это работает именно для этой структуры, но если, например, последний div без p, он не будет работать. Итак, я ищу решение, которое найдет последний p и добавит только к нему нижнюю границу.

— 30.10.2018 17:38

да, верно (я написал «в этом конкретном случае»), но я не думаю, что есть решение, использующее только CSS или SCSS - я полагаю, вам понадобится Javascript для этого, чтобы проверить, какие DIV содержат элементы p.

— 30.10.2018 17:48

30.10.2018 17:20