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

Question

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

Я ищу способ выбрать каждое первое появление элемента (помечено -). Предпочтительно, я хотел бы сделать это в CSS, но я также могу работать с решением JavaScript.

<div class="type-1"></div> - 
<div class="type-1"></div> 
<div class="type-1"></div> 
<div class="type-2"></div> - 
<div class="type-1"></div> - 
<div class="type-1"></div> 
<div class="type-2"></div> - 
<div class="type-2"></div> 
<div class="type-1"></div> - 
... 

Answer 1

Так же, как это: https://jsfiddle.net/aq8nw21f/

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

#container > div:first-of-type, .type-1 + .type-2, .type-2 + .type-1 { 
 
    color: red; 
 
}

<div id="container"> 
 
    <span>If you used :first-child, the div below this would not highlight.</span> 
 
    <div class="type-1">Yes</div> 
 
    <div class="type-1">No</div> 
 
    <div class="type-1">No</div> 
 
    <div class="type-2">Yes</div> 
 
    <div class="type-1">Yes</div> 
 
    <div class="type-1">No</div> 
 
    <div class="type-2">Yes</div> 
 
    <div class="type-2">No</div> 
 
    <div class="type-1">Yes</div> 
 
</div>

Answer 2

И менее эффектный решение JS, чем CSS один из TW80000:

var els = Array.from(document.querySelectorAll('div[class^="type-"]')); 
 

 
console.log(els.filter(function(el, index) { 
 
    return index === 0 || !el.classList.contains(els[index - 1].classList.item(0)); 
 
}));

<div class="type-1">1</div> 
 
<div class="type-1">2</div> 
 
<div class="type-1">3</div> 
 
<div class="type-2">4</div> 
 
<div class="type-1">5</div> 
 
<div class="type-1">6</div> 
 
<div class="type-2">7</div> 
 
<div class="type-2">8</div> 
 
<div class="type-1">9</div>