title: Apply general sibling (~) until it reaches an element and then no longer match
body: <p>Is there a way to use something similar to general sibling in css where it continues matching anything directly after an element until an element doesn't match and the no longer check afterwards?</p>
  <p>E.g.</p>
  <pre><code>&lt;p class=&quot;para expanded&quot;&gt;ABC&lt;/p&gt;
  &lt;p class=&quot;para-after&quot;&gt;ABC&lt;/p&gt;
  &lt;p class=&quot;para-after&quot;&gt;ABC&lt;/p&gt;
  &lt;p class=&quot;para-after&quot;&gt;ABC&lt;/p&gt;
  &lt;p class=&quot;para&quot;&gt;ABC&lt;/p&gt;
  &lt;p class=&quot;para-after&quot;&gt;ABC&lt;/p&gt;
  &lt;p class=&quot;para-after&quot;&gt;ABC&lt;/p&gt;
  &lt;p class=&quot;para-after&quot;&gt;ABC&lt;/p&gt;
  &lt;p class=&quot;para expanded&quot;&gt;ABC&lt;/p&gt;
  &lt;p class=&quot;para-after&quot;&gt;ABC&lt;/p&gt;
  &lt;p class=&quot;para-after&quot;&gt;ABC&lt;/p&gt;
  </code></pre>
  <p>CSS</p>
  <pre><code>.para.expanded ~ .para-after { color: red; }
  </code></pre>
  <p>This will match all <code>.para-after</code> including the ones which comes directly after second <code>.para</code> which isn't <code>.expanded</code> but I want it to reach the second <code>.para</code> and then stop looking so it only matches the first 3 <code>.para-after</code> and then again matches the ones directly after the last <code>.para.expanded</code> as well. I won't know how many <code>.para-after</code> there are so I can't manually specify any amount. Is there a way to do this?</p>