Is there a way to target all p elements that follow h1, specifically those that appear later in the DOM structure? These p elements may be at the same level as h1 or nested multiple levels deep, rendering selectors like ~ or + ineffective...
In this scenario, the goal is to give 'Paragraph 3', 'Paragraph 4' and 'Paragraph 5' a red background.
I'm seeking solutions using pure CSS selectors or via Nokogiri. Thank you.
<!DOCTYPE html>
<html>
<head>
<style>
h1 ~ p {
background: red;
}
</style>
</head>
<body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<h1>Foo</h1>
<p>Paragraph 3</p>
<div>
<p>Paragraph 4</p>
</div>
<span>
<div>
<p>Paragraph 5</p>
<div>
</span>
</body>
</html>