šŸŽ Checkout my Learn React by Making a Game course and get 1 month Free on Skillshare!

CSS – select all elements between two classes

Let's see how we can write a CSS selector that targets all elements between two classes.

Take the below example:
CSS - select all elements between two classes

We want to add a background color to all the elements between the .start and .end classes.

Below is the CSS selector that does this:

/* Select all  the elements between 
the .start and .end classes */
.start ~ :not(.end,.end ~ *) {
    background-color: orangered;
}

And this is the result:
CSS - select all elements between two classes

The way how this selector work is by selecting all sibling elements that come after an element with a class of .start but do not have a class of .end or any element that comes after an element with a class of .end.

As usual, you can check out the full code on Github and see the live example here.

Happy CSS styling, folks!

šŸ“– 50 Javascript, React and NextJs Projects

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.

šŸ“– 50 Javascript, React and NextJs Projects

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.


Leave a Reply

Your email address will not be published. Required fields are marked *