How to select all elements between two elements?

Question

If I have this HTML, how can I select all elements between #one and #two with CSS? I can't use jQuery.

<p id="one"></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p id="two"></p>

Answer 1

The ~ general sibling combinator is what you are looking for

#one ~ p:not(#two) {
  color: red;
}

So what the above selector does is, it starts selecting all the p elements which are adjacent to #one till #two and later, I use :not() pseudo to exclude the last p:

#one ~ p:not(#two) {
    color: red;
}

<p id="one">0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p id="two">6</p>

JSFiddle