Выделить первый элемент за видимым блоком. Без атрибутов

Подскажите, как выделить первый параграф за видимым блоком. Нужно сделать желтым шрифтом.

div + p /* выделяет после обоих блоков */
div + p:first-child /* не работает */
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <article>
        <p>Green</p>
        <p>Blue</p>
        <div>
            <p>Red centered</p>
        </div>
        <p>Yellow</p>
    <p>Green</p>
    <div class="hidden"><p>Hidden</p></div>
    <p>Green</p>
    <p>Green</p>
    <p>Purple</p>
        <p>Pink</p>
    <hr>
    </article>
</body>
</html>

Ответы (1 шт):

Автор решения: Knyaz71

Попробуй так div:not(.hidden) + p { background:#FF0; }:

div:not(.hidden)+p {
  background: #FF0;
}
<article>
  <p>Green</p>
  <p>Blue</p>
  <div>
    <p>Red centered</p>
  </div>
  <p>Yellow</p>
  <p>Green</p>
  <div class="hidden">
    <p>Hidden</p>
  </div>
  <p>Green</p>
  <p>Green</p>
  <p>Purple</p>
  <p>Pink</p>
  <hr>
</article>

→ Ссылка