2

In my code, there are list items and they all have a category. Each categories are sequentially added for each list items.

Here is my HTML:

HTML

<ul>

  <li class='A'>A1</li>
  <li class='A'>A2</li>
  <li class='A'>A3</li>
  <li class='A'>A4</li>

  <li class='B'>B1</li>
  <li class='B'>B2</li>
  <li class='B'>B3</li>
  <li class='B'>B4</li>

  <li class='C'>C1</li>
  <li class='C'>C2</li>
  <li class='C'>C3</li>
  <li class='C'>C4</li>

</ul>

CSS

ul li{display:none}
ul li.A:nth-of-type(1){display:block}
ul li.B:nth-of-type(1){display:block}
ul li.C:nth-of-type(1){display:block}

I am trying to display only the first element of each category. I am expecting below output:

  • A1
  • B1
  • C1

Here is my fiddle - https://jsfiddle.net/9pdby6st/200/

I observed that nth-of-type works only when the very first element is that category.

Here are the limitations:

  • Cannot change html structure
  • Cannot use javascript

Can use SCSS. Any advice?

Ashwin
  • 12,081
  • 22
  • 83
  • 117

3 Answers3

3

You could use the adjacent sibling selector + for the elements that end with a class name and start the next tag with another class name.

Eg: .A + .B {display: block}

In the above case, only one instance is possible and the first element with the classname B displays and the other siblings are hidden.

You could use it to create many combos such as .B + .C {display: block} and so on.

JSFiddle link

ul li {
  display: none
}

ul li.A:first-child {
  display: block
}

ul li.A+.B {
  display: block
}

ul li.B+.C {
  display: block
}
<ul>

  <li class='A'>A1</li>
  <li class='A'>A2</li>
  <li class='A'>A3</li>
  <li class='A'>A4</li>

  <li class='B'>B1</li>
  <li class='B'>B2</li>
  <li class='B'>B3</li>
  <li class='B'>B4</li>

  <li class='C'>C1</li>
  <li class='C'>C2</li>
  <li class='C'>C3</li>
  <li class='C'>C4</li>

</ul>
Allan Jebaraj
  • 1,062
  • 8
  • 25
  • Would be better to use display: list-item instead of block to keep the items looking like list-items. – Esko Dec 21 '18 at 07:12
2

As seen here: https://stackoverflow.com/a/8539107/1423096

You can set the property for all the items and then undo it for the siblings that come after the first one.

ul li {
  color: red
}

ul li.A:nth-of-type(1) {
  color: blue
}

ul>li.B {
  color: green
}

ul>li.B~li.B {
  color: red
}

ul>li.C {
  color: yellow
}

ul>li.C~li.C {
  color: red
}
<ul>

  <li class='A'>A1</li>
  <li class='A'>A2</li>
  <li class='A'>A3</li>
  <li class='A'>A4</li>

  <li class='B'>B1</li>
  <li class='B'>B2</li>
  <li class='B'>B3</li>
  <li class='B'>B4</li>

  <li class='C'>C1</li>
  <li class='C'>C2</li>
  <li class='C'>C3</li>
  <li class='C'>C4</li>

</ul>
alo Malbarez
  • 358
  • 2
  • 6
  • 16
0

Try this (inspired by alo Malbarez answer)

ul li{display:block}
ul>li.A~li.A {display: none}
ul>li.B~li.B {display: none}
ul>li.C~li.C {display: none}
<ul>
    
  <li class='A'>A1</li>
  <li class='A'>A2</li>
  <li class='A'>A3</li>
  <li class='A'>A4</li>
  
  <li class='B'>B1</li>
  <li class='B'>B2</li>
  <li class='B'>B3</li>
  <li class='B'>B4</li>
  
  <li class='C'>C1</li>
  <li class='C'>C2</li>
  <li class='C'>C3</li>
  <li class='C'>C4</li>

</ul>
Kamil Kiełczewski
  • 85,173
  • 29
  • 368
  • 345