it-roy-ru.com

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

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

Вот мой 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 
  • С1

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

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

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

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

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

2
Ashwin

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

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

В приведенном выше случае возможен только один экземпляр, и отображается первый элемент с именем класса 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>

3
Allan Jebaraj

Как видно здесь: 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>

2
alo Malbarez

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

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>

0
Kamil Kiełczewski