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, 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, 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

58,591
15
114
126

No, it's exactly her original question. I put a comment at start instead of this kind of answers because I understand perfectly that she needs to count 6 elements – Marcos Pérez Gude Apr 29 '16 at 10:01
1

@Marcos Pérez Gude: Her original question says "only 6", and now she's saying "one more condition is... i need to hide it if
count is less than or equal to 6."

BoltClock

Apr 29 '16 at 10:02

CSS is not a programming language. I think that's impossible. You can make weird tricks, but not bulletproof. – Marcos Pérez Gude Apr 29 '16 at 10:06

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