Таргетинг на все элементы p, следующие за h2, с помощью CSS

Question

Как мне настроить таргетинг на все p элементов, которые следуют за заголовком, например ....

<h2 class = 'history'>History</h2>
<p>this is paragraph 1</p>
<p>this is paragraph 2</p>
<p>this is paragraph 3</p>

<h2 class = 'present'>Present</h2>
<p>I don't want to target this paragraph</p>
<p>I don't want to target this paragraph</p>
<p>I don't want to target this paragraph</p>

с помощью .history + p я могу настроить таргетинг на абзац 1, но как нацелиться на другие абзацы, пока я не доберусь до тега «Present» H2?

Answer 1

Если других элементов p нет, вы можете использовать ~ вместо +:

.history ~ p

Если после вашего второго h2 появилось больше элементов p, и вы хотите выбрать только те, которые находятся между h2.history и h2.present, я не думаю, что это возможно с текущими селекторами CSS. Общий селектор братьев и сестер ~ соответствует каждому p брату, который идет после вашего h2, независимо от того, есть ли среди них другие братья и сестры.

Тем не менее, вы можете легко сделать это, используя jQuery:

$('.history').nextUntil('.present')