Select all elements between 2 headers (with variable ids)-CodePudding

I need to select all elements after one header and before another, then nothing after.

Ie, i need to select 1-5, but then not "no" in this example:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css"></link>
</head>
<body>
    <h4 id="this-is-bodger">0</h4>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <h3 id="that-is-the-badger">6</h3>
    <p>no</p>
</body>
</html>

I've tried this in CSS, but it highlights the "no":

[id^=this-is] ~ p:not([id^=that-is]){
    color: red
}

How can I do this?

I thought this would work, but it highlights no.

Note:

the latter part of the ids changes after this-is- and that-is-
i need to do this in one statement
"no" must not be included

CodePudding user response：

You can do it like below. Select all the p after the first ID that are not after the second ID

[id^=this-is] ~ p:not([id^=that-is] ~ *) {
  color: red
}

<div>
  <h4 id="this-is-bodger">0</h4>
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <h3 id="that-is-the-badger">6</h3>
  <p>no</p>
</div>