1

So I have an unordered list, heading and a list item, in that order. I assigned different classes to the heading and I just want to show the first child of each type of class. Basically this is to add sub categories to a page with all products

Here is the code:

.product-list-list {
  .cat-1 {
    display: hidden;
  }
  .cat-1:first-child {
    display: block;
  }
  .cat-2 {
    display: hidden;
  }
  .cat-2:first-child {
    display: block;
  }
}
<ul class="product-list-list>
  <h5 class="cat-1">sub category 1</h5>
  <li>product details</li>
  <h5 class="cat-1">sub category 1</h5>
  <li>product details</li>
  <h5 class="cat-1">sub category 1</h5>
  <li>product details</li>
  <h5 class="cat-2">sub category 2</h5>
  <li>product details</li>
  <h5 class="cat-2">sub category 2</h5>
  <li>product details</li>
  <h5 class="cat-2">sub category 2</h5>
  <li>product details</li>
</ul>

Results I got: sub category 1

sub category 2 is not showing

Jo Chong
  • 11
  • 3
  • 1
    First, fix the basic errors. There's no such thing as `display: hidden`. `h5` is not valid as a child of a `ul`. Compile CSS for stack snippets. – Michael Benjamin Jun 13 '18 at 23:22
  • OK now I have changed to display: none and h5 to li. sub category 2 is still not showing. But it shows when I removed the class('cat-2'). Is it something wrong with my CSS? But then it works for cat-1... – Jo Chong Jun 14 '18 at 02:49
  • First-child is not as simple as I thought. Found my answer at https://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class – Jo Chong Jun 14 '18 at 22:31

0 Answers0