Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

css

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?

like image 884
mshwf Avatar asked Dec 10 '22 16:12

mshwf


2 Answers

In this case, something like

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

JSFiddle

like image 57
dsgriffin Avatar answered Jan 11 '23 23:01

dsgriffin


: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>
like image 28
Quentin Avatar answered Jan 12 '23 00:01

Quentin