Css selector, elements between two classes

Question

I am trying to write a css selector that can select the elements between two clases .

Example:

<div class='start'></div>
<div></div> 
<div></div>
<div class='end'></div>

My question is following: is there a way to use css selector to select two divs between the .start div and .end div?

Any help is appreciated!

Answer 1

I think your best option is to use :not() selector in CSS. CSS does not have a mechanism where you can select elements in between.

div:not(.start):not(.end) {
  background: red;
}

<div class='start'>A</div>
<div>B</div>
<div>C</div>
<div class='end'>D</div>

Answer 2

In Addtion to @Nidhin Josephr's answer you can also do it without adding .start & .end class using :not() with :nth-child :nth-last-child pseudo selector.

Codepen

HTML

<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>

CSS

div:not(:nth-child(1)):not(:nth-last-child(1)){
  background: red;
}