Count children in parent via CSS

Question

How can I count children <li> within a <ul>?

I want to hide last <li> if <ul> is have less than or equals to 6 <li>'s in one <ul>.

CODE

<ul>
  <li>one</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li class="more"><span>Hide this if only 6 li's are there in this ul</span></li>
</ul>

Fiddle

You can't count elements in CSS. You must use javascript to make calculations and then you can add or remove classnames to achieve that you want — Marcos Pérez Gude, Apr 29 '16 at 09:47
there is a method in css. i know thats lil tricky. but we can achieve it. — richa_pandey, Apr 29 '16 at 09:49
@BoltClock : this question can not be marked as duplicate as the one you selected, because solution for both the queries is different. `li:nth-of-type(5) + li, :nth-child(-n+5).more { display: none; }` — richa_pandey, Apr 29 '16 at 11:42

dippas · Answer 1 · 2016-04-30T12:27:26.720

4

you can use the nth-of-type()(or nth-child()) plus adjacent selector +

li {
  background: red
}
.more {
  background: green
}
li:nth-of-type(5) + li {
  display: none
}

<h1> 6 items </h1>

<ul>
  <li>one</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li class="more"><span>Hide this if only 6 li's are there in this ul</span>
  </li>
</ul>

<h1> 5 items </h1>


<ul>
  <li>one</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li class="more"><span>Hide this if only 6 li's are there in this ul</span>
  </li>
</ul>

<h1> 7 items </h1>

<ul>
  <li>one</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li class="more"><span>Hide this if only 6 li's are there in this ul</span>
  </li>
  <li>Seven</li>
</ul>

edited Apr 30 '16 at 12:27

answered Apr 29 '16 at 09:48

dippas

52,735
15
110
120

this will hide the 6th list-item even when the list has more than 6 list-items – Fabrizio Calderan Apr 29 '16 at 09:51
@fcalderan but OP says it only have 6 itens no more: *I want to hide last
if
- 's in one

dippas

Apr 29 '16 at 09:53

this actually solves whatever i have written in my query but one more condition is... i need to hide it if `

` count is less than or equal to 6.

– richa_pandey Apr 29 '16 at 09:58

score 1 · Answer 2 · answered Apr 29 '16 at 09:55

If you need to hide the .more element if and only if (as I've understood from the question) your list has 6 list-items then you could do it in this way

li:nth-last-child(6):first-child ~ .more {
  display: none;
}

when, counting from the last element, the nth-last-child(6) element is also the first child then the list must have exactly 6 list-items.

Codepen example

As you can see from the example, in the first list the 6^th element is not affected because the list has not only 6 list-items

score 1 · Answer 3 · answered Apr 29 '16 at 09:57

Use the following code to achieve this:

li:nth-of-type(6):last-child {
  display:none;
}

<h3>Remove nothing</h3>
<ul>
  <li>Test #1</li>
  <li>Test #2</li>
  <li>Test #3</li>
  <li>Test #4</li>
  <li>Test #5</li>
  <li>Test #6</li>
  <li>Test #7</li>
</ul>
<h3>Remove #6</h3>
<ul>
  <li>Test #1</li>
  <li>Test #2</li>
  <li>Test #3</li>
  <li>Test #4</li>
  <li>Test #5</li>
  <li>Test #6 (hide this)</li>
</ul>
<h3>Remove nothing</h3>
<ul>
  <li>Test #1</li>
  <li>Test #2</li>
  <li>Test #3</li>
  <li>Test #4</li>
  <li>Test #5</li>
</ul>

Count children in parent via CSS

3 Answers3