How to exclude last child in css pseudo class sele

2019-06-22 07:09发布

问题:

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.

回答1:

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

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


回答2:

You can do this:

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

Fiddle Demo



回答3:

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.



回答4:

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>