Ориентация на все последние (но не самые последние) элементы данного тега

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

#myLayout *:not(:last-child) > p:last-child {
  color: red
}

Этот код захватывает каждого родителя с p-ребенком. Следует игнорировать последнего дочернего брата и всегда брать последний р. Я бы порекомендовал заменить * на узел или селектор CSS, чтобы предотвратить неожиданные результаты. Я также рекомендую по крайней мере ограничить возможные проблемы, заключив все в контейнер, как показано ниже.

<div id="myLayout">
  <div>
    <h2>h1</h2>
    <p>p1</p>
    <p>p2</p>
  </div>
  <div>
    <h2>h1</h2>
    <p>p1</p>
    <p>p2</p>
  </div>
  <div>
    <h2>h1</h2>
    <p>p1</p>
    <p>p2</p>
  </div>
</div>

Изменить . Как уже упоминали другие пользователи, вы можете реструктурировать свой HTML-код, чтобы он легче работал с селекторами. Но если это невозможно, вы можете использовать JavaScript для этого. В этом случае все, что вам нужно сделать, это посмотреть, является ли элемент тегом «p» и не является ли следующий элемент тегом «p»:

var children = document.getElementById('content').children;
for (let i = 0; i < children.length - 1; i++) {
  let nextTagName = children[i+1].tagName;
  if (children[i].tagName === 'P' && nextTagName !=='P') {
      children[i].classList.add('selected');
  }
}

.selected {
  color: aqua;
}

<div id="content">
    <h2>Heading 1</h2>
    <p>p 1</p>
    <p>p 2</p>
    <h3>Heading 2</h3>
    <p>p 3</p>
    <p>p 4</p>
    <h4>Heading 3</h4>
    <p>p 5</p>
    <p>p 6</p>
</div>

Это не очень хорошая структура HTML для того, что вы хотите сделать. Будет намного проще, если вы поместите каждый набор hX и p в тег контейнера, например, div.

В противном случае вам придется зацикливаться на каждом элементе с помощью JavaScript и решать, применять ли стили (если текущий элемент является p, и есть следующий элемент, а это не p).