How can I exclude last two child elements with CSS selector?

Question

I want to draw bottom-border under some div elements inside their parent but except the last two, knowing that number of child element is changeable:

<div id="parent">
   <div>
One
   </div>
   <div>
Two
   </div>
   <div>
Three
   </div>
   <div>
Four
   </div>
</div>

Is it possible to select all child elements except the last two?

Answer 1

:nth-last-child should do the job (combined with :not).

#parent >:not(:nth-last-child(-n+2)) {
  border-bottom: solid black 1px;
}

<div id="parent">
  <div>
    One
  </div>
  <div>
    Two
  </div>
  <div>
    Three
  </div>
  <div>
    Four
  </div>
  <div>
    Five
  </div>
  <div>
    Six
  </div>
  <div>
    Seven
  </div>
</div>

Answer 2

In this case, something like

#parent > div:not(:nth-last-of-type(-n+2)) {
  border-bottom: 1px solid red;
}

JSFiddle