qwelton qwelton - 1 year ago 101
CSS Question

CSS Selector for first matching element

<section class="section-one"></section>
<section class="section-two"></section>
<section class="section-three"></section>
<section class="section-four"></section>

Because section order is coming from a CMS, section order is unknown (i.e.,
could be swapped). I want to select the first sibling section after
but can't use adjacent sibling selectors as there are potentially other elements between sections.

How can I select the first section following
considering there could be one or multiple elements between them?

Answer Source
.section-two ~ section {
  /* Set styles */
.section-two ~ section ~ section {
  /* Undo styles */

.section-two ~ section {
  background: #0f0;
.section-two ~ section ~ section {
  background: transparent;
<section class="section-one">One</section>
<section class="section-two">Two</section>
<section class="section-three">Three</section>
<section class="section-four">Four</section>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download