CODEWITHSUNDEEP
csscss-selectors
NewtonCode
NewtonCode

Reputation: 1542

How to exclude last child in css pseudo class selector

I want to apply a particular style for child div from 4 to n-1 .i was able to do from 4 to n , but could not exclude the last div

here is the jsfiddle http://jsfiddle.net/8WLXX/

.container div:nth-child(n+4)   {     background: red; }

All I want is exclude last div also.

Upvotes: 5

Views: 5488

Answers (4)

Walf
Walf

Reputation: 9348

For future readers:

.nth-test div:nth-child(n+4):nth-last-child(n+2) {
  background: red;
}
<div class="nth-test">
  <div>foo</div>
  <div>foo</div>
  <div>foo</div>
  <div>foo</div>
  <div>foo</div>
  <div>foo</div>
  <div>foo</div>
  <div>foo</div>
</div>

Upvotes: 0

Nitesh
Nitesh

Reputation: 15779

You can also do it by using .container div:nth-child(n+4):last-child

For Instance,

.container div:nth-child(n+4):last-child{
      background:none;
}

WORKING DEMO

Hope this helps.

Upvotes: 0

palaѕн
palaѕн

Reputation: 73976

You can do this:

.container div:nth-child(n+4):not(:last-child) {
    background: red;
}

Fiddle Demo

Upvotes: 5

Jon
Jon

Reputation: 437904

Simply add :not(:last-child) to the selector:

.container div:nth-child(n+4):not(:last-child)

Upvotes: 3

Related Questions