CODEWITHSUNDEEP
javascripthtmljquerycss
ONYX
ONYX

Reputation: 5859

css selector - select every div in between first and last

How do you select the div elements after the first and before the last div in a container, so your selecting everything in between

I have this in my css

&--marker {
        background: green;
        width: 20px;
        height: 20px;
        border-radius: 100%;
        position: absolute;
        top: 50%;
        transform: translate3d(0, -50%, 0);

        &:first-child {
            left: calc((100% / var(--index)));
        }

        // selector below doesn't work
        &:nth-of-type():not(:first-of-type):not(:last-of-type) {                
            left: calc((100% / (var(--index) + 1)) - (var(--width)/2));
        }

        &:last-child {
            left: calc((100%  - var(--width));

        }
    }

Upvotes: 1

Views: 295

Answers (3)

Abdullah Saud
Abdullah Saud

Reputation: 76

Simply

.someParentClass div:not(:first-child):not(:last-child) {
 //your css
}

Upvotes: 0

Mouhamedou
Mouhamedou

Reputation: 21

you can try this:

.container div:not(:first-child):not(:last-child) {
       /* css here */
}

Upvotes: 2

Onkar
Onkar

Reputation: 2584

As your question doesn't have any HTML structure, so I have created a test and apply the color to all inside and then update for 1st and last-child, are you looking for the same?

div.container *{ 
  color: red;
}
div.container div:first-child,
div.container div:last-child{ 
  color: green;
}
<div class="container">
  <div class="first">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div class="last">6</div>
</div>

Upvotes: 0

Related Questions