Отображать только первый элемент каждой категории

Question

В моем коде есть элементы списка, и все они имеют категорию.Каждая категория добавляется последовательно для каждого элемента списка.

Вот мой 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}

Я пытаюсь отобразить только первый элемент в каждой категории.Я ожидаю ниже вывода:

• A1
• B1
• C1

Вот моя скрипка - https://jsfiddle.net/9pdby6st/200/

Я заметил, что nth-of-type работает только тогда, когда самый первый элемент относится к этой категории.

Вот ограничения:

• Невозможно изменить структуру HTML
• Невозможно использовать JavaScript

Можно использовать SCSS.Любой совет?

Answer 1

Как видно здесь: https://stackoverflow.com/a/8539107/1423096

Вы можете установить свойство для всех элементов, а затем отменить его для братьев и сестер, следующих за первым.

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 2

Попробуйте (вдохновлено ответом ало Мальбарез )

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>

Answer 3

Вы можете использовать соседний селектор брата + для элементов, оканчивающихся на имя класса, и начинать следующий тег другим именем класса.

Например: .A + .B {display: block}

InВ приведенном выше случае возможен только один экземпляр, и отображается первый элемент с именем класса B, а остальные братья и сестры скрыты.

Вы можете использовать его для создания множества комбинаций, таких как .B + .C {display: block} и т. д.

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>