Display only first element of each category - html

Question

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?

Answer 1

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>

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

Answer 3

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>