Отображать только первый заголовок класса с типом

Question

У меня следующая проблема:

У меня есть такой список:

<div class="list">
  
  <h3 class="type1">Type 1</h3>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <h3 class="type1">Type 1 to be hidden</h3>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <h3 class="type2">Type 2 </h3>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <h3 class="type2">Type 2 to be hidden</h3>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <h3 class="type2">Type 3 </h3>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <h3 class="type2">Type 3 to be hidden</h3>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  
</div>

Там у меня есть несколько заголовков (h3 с классом type1, type2, type3).

Я хочу показать только первое из каждого типа.

Как я могу сделать это в css.

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

Любые идеи ???

Answer 1

Если в ваших последних классах нет опечатки type2 (где у вас есть текст с надписью "type 3"), вы можете использовать общий селектор брата ~ вместе с nth-of-type

h3 {
  background: red /* demo */
}

h3:first-of-type~h3 {
  display: none
}

h3.type1~.type2:nth-of-type(2n+1) {
  display: block
}

<div class="list">

  <h3 class="type1">Type 1</h3>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <h3 class="type1">Type 1 to be hidden</h3>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <h3 class="type2">Type 2 </h3>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <h3 class="type2">Type 2 to be hidden</h3>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <h3 class="type2">Type 3 </h3>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <h3 class="type2">Type 3 to be hidden</h3>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>

</div>

---

Если в этих классах есть опечатка, вы достигаете ее с помощью общего брата браков ~ таким же образом, но с использованием селекторов в другомпуть

h3 {
  background: red/* demo */
}

.type1~.type1,
.type2~.type2,
.type3~.type3 {
  display: none;
}

<div class="list">

  <h3 class="type1">Type 1</h3>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <h3 class="type1">Type 1 to be hidden</h3>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <h3 class="type2">Type 2 </h3>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <h3 class="type2">Type 2 to be hidden</h3>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <h3 class="type3">Type 3 </h3>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <h3 class="type3">Type 3 to be hidden</h3>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>
  <div class="item">ITEM ---- ITEM</div>

</div>

Answer 2

.list h3:nth-of-type(2n+1) Он выберет первый элемент H3 среди других.использование nth-of-type выберет дочерний элемент по типу элемента.

Answer 3

Используйте этот стиль

.type1 ~ .type1, 
.type2 ~ .type2, 
.type3 ~ .type3
{
    display: none;
}

Это общий селектор брата