3

How can I not exclude a element from counting if it's set display: none;?

body {
  counter-reset: section;
}
.variant--name::before {
  counter-increment: section;
  content: counter(section) ": ";
}

.hidden {
  display: none;
}
<div class="variant--group">
<h3 class="variant--name">variant</h3>
</div>

<div class="variant--group hidden">
<h3 class="variant--name">variant</h3>
</div>

<div class="variant--group">
<h3 class="variant--name">variant</h3>
</div>
Alexander Hein
  • 960
  • 3
  • 19
  • 44
  • You may want to have a look at this answer - http://stackoverflow.com/questions/25766110/css-counter-on-hidden-submenu. You can't make the CSS counter count elements with `display: none` ([this](https://www.w3.org/TR/CSS2/generate.html) is an old spec but you can see this in Section 12.4.3). You have to hide elements some other way. – Harry Apr 13 '16 at 13:32

1 Answers1

6

As the .hidden is giving the element display: none this is why the counter wouldnt work as its effectively not in the dom.

I would maybe add a class (just incase .hidden else where needed to be display: none) of:

.hiddenButAccessible {
  position: absolute;
  left: -9999px;
  max-height: 0px;
  overflow: hidden;
  opacity: 0;
}

here's a working example:

http://codepen.io/sonnyprince/pen/oxqzzL

Sonny Prince
  • 1,094
  • 7
  • 15