1

I have an unordered list <ul> which can have 15,30,45,60,75,90,... and so on elements in it. I want to hide only last element if the list has 15 / 45 / 75 / 105 and so on. I want to do it with CSS only, no JQuery etc.

I tried my level best to accomplish it and found this article Can CSS detect the number of children an element has? so far but could not get to work it.

How can I get this job done?

wscourge
  • 10,657
  • 14
  • 59
  • 80
Airy
  • 5,484
  • 7
  • 53
  • 78

2 Answers2

4

Combine :last-child with nth-of-type :

ul > li:last-child:nth-of-type(15n):not(:nth-of-type(30n)) { display: none; }
wscourge
  • 10,657
  • 14
  • 59
  • 80
2

Use :last-child and :nth-child:

ul :last-child:nth-child(30n+15)
{ 
    display: none; 
}

Demo (using 3/9/15 here instead because I don't want to paste too many li)

ul :last-child:nth-child(6n+3) {
  background: red;
}
<ul>
  <li>1st child</li>
  <li>1st child</li>
  <li>1st child</li>
  <li>1st child</li>
  <li>1st child</li>
  <li>1st child</li>
</ul>

<ul>
  <li>1st child</li>
  <li>1st child</li>
  <li>1st child</li>
</ul>
AVAVT
  • 7,058
  • 2
  • 21
  • 44