Выберите первый и последний элемент последовательностей с определенным классом в CSS

Question

У меня есть много div, имеющих класс line с элементом strong.datum внутри. Мне нужно выделить первый и последний элемент каждой последовательности с классом .active. Если это невозможно сделать с помощью CSS, есть ли шанс сделать это через jQuery?

В этом примере должны быть элементы .start класса .dt_26, .dt_66, .dt_27, .dt_77, а класс .end должен иметь элементы .dt_46, .dt_76, .dt_57 and .dt_97.

<div class="line">
<strong class="dt_16 app_54 datum">1.6.</strong>
<strong class="dt_26 app_54 datum active">2.6.</strong>
<strong class="dt_36 app_54 datum active">3.6.</strong>
<strong class="dt_46 app_54 datum active">4.6.</strong>
<strong class="dt_56 app_54 datum">5.6.</strong>
<strong class="dt_66 app_54 datum active">6.6.</strong>
<strong class="dt_76 app_54 datum active">7.6.</strong>
<strong class="dt_86 app_54 datum active">8.6.</strong>
<strong class="dt_96 app_54 datum active">9.6.</strong>
<strong class="dt_106 app_54 datum">10.6.</strong>
</div>
<div class="line">
<strong class="dt_17 app_54 datum">1.7.</strong>
<strong class="dt_27 app_54 datum active">2.7.</strong>
<strong class="dt_37 app_54 datum active">3.7.</strong>
<strong class="dt_47 app_54 datum active">4.7.</strong>
<strong class="dt_57 app_54 datum active">5.7.</strong>
<strong class="dt_67 app_54 datum">6.7.</strong>
<strong class="dt_77 app_54 datum">7.7.</strong>
<strong class="dt_87 app_54 datum active">8.7.</strong>
<strong class="dt_97 app_54 datum active">9.7.</strong>
<strong class="dt_107 app_54 datum">10.7.</strong>
</div>

Answer 1

Это не точно возможно в CSS - так что вот ванильное решение JS - см. Пояснения в строке:

// get a list of line elemnts
[...document.querySelectorAll('.line')].forEach(function(line) {
  // reduce the child elements
  [...line.querySelectorAll('strong')].reduce(function(p,c) {
    if (c.classList.contains('active')) {
      if(!p) // mark first
        c.classList.add('first');
       // mark last after checking the following child
      if((!c.nextElementSibling || !c.nextElementSibling.classList.contains('active')) && p)
        c.classList.add('last');
      return true;
    }
    return false;
  }, false);
})

.first {
  color: cadetblue;
}

.last {
  color: red;
}

<div class="line">
  <strong class="dt_16 app_54 datum">1.6.</strong>
  <strong class="dt_26 app_54 datum active">2.6.</strong>
  <strong class="dt_36 app_54 datum active">3.6.</strong>
  <strong class="dt_46 app_54 datum active">4.6.</strong>
  <strong class="dt_56 app_54 datum">5.6.</strong>
  <strong class="dt_66 app_54 datum active">6.6.</strong>
  <strong class="dt_76 app_54 datum active">7.6.</strong>
  <strong class="dt_86 app_54 datum active">8.6.</strong>
  <strong class="dt_96 app_54 datum active">9.6.</strong>
  <strong class="dt_106 app_54 datum">10.6.</strong>
</div>
<div class="line">
  <strong class="dt_17 app_54 datum">1.7.</strong>
  <strong class="dt_27 app_54 datum active">2.7.</strong>
  <strong class="dt_37 app_54 datum active">3.7.</strong>
  <strong class="dt_47 app_54 datum active">4.7.</strong>
  <strong class="dt_57 app_54 datum active">5.7.</strong>
  <strong class="dt_67 app_54 datum">6.7.</strong>
  <strong class="dt_77 app_54 datum">7.7.</strong>
  <strong class="dt_87 app_54 datum active">8.7.</strong>
  <strong class="dt_97 app_54 datum active">9.7.</strong>
  <strong class="dt_107 app_54 datum">10.7.</strong>
</div>

Answer 2

Вот решение jQuery ...

Используя .prev() и .next(), вы можете перебрать все .line .children() элементов и проверьте, являются ли они первыми или последними.

Я даже сделал дополнение для удовольствия ... Вы также можете проверить, являются ли они "одинокими" ...;)

Как видите, код довольно понятен ...

$(".line").children().each(function(){

  // Firsts
  if( $(this).hasClass("active") && !$(this).prev().hasClass("active") ){
    $(this).addClass("first");
  }
  
  // Lasts
  if( $(this).hasClass("active") && !$(this).next().hasClass("active") ){
    $(this).addClass("last");
  }
  
  // Lonelies
  if( $(this).hasClass("active") && !$(this).prev().hasClass("active") && !$(this).next().hasClass("active") ){
    $(this).removeClass("first last").addClass("alone");
  }
});

.first{
  color: green;
}
.last{
  color: orange;
}
.alone{
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="line">
  <strong class="dt_16 app_54 datum">1.6.</strong>
  <strong class="dt_26 app_54 datum active">2.6.</strong>
  <strong class="dt_36 app_54 datum active">3.6.</strong>
  <strong class="dt_46 app_54 datum active">4.6.</strong>
  <strong class="dt_56 app_54 datum">5.6.</strong>
  <strong class="dt_66 app_54 datum active">6.6.</strong>
  <strong class="dt_76 app_54 datum active">7.6.</strong>
  <strong class="dt_86 app_54 datum active">8.6.</strong>
  <strong class="dt_96 app_54 datum active">9.6.</strong>
  <strong class="dt_106 app_54 datum">10.6.</strong>
</div>
<div class="line">
  <strong class="dt_17 app_54 datum">1.7.</strong>
  <strong class="dt_27 app_54 datum active">2.7.</strong>
  <strong class="dt_37 app_54 datum active">3.7.</strong>
  <strong class="dt_47 app_54 datum active">4.7.</strong>
  <strong class="dt_57 app_54 datum active">5.7.</strong>
  <strong class="dt_67 app_54 datum">6.7.</strong>
  <strong class="dt_77 app_54 datum">7.7.</strong>
  <strong class="dt_87 app_54 datum active">8.7.</strong>
  <strong class="dt_97 app_54 datum">9.7.</strong>
  <strong class="dt_107 app_54 datum">10.7.</strong>
</div>

Answer 3

AFAIK. Вы не можете выбрать первый и последний элемент с дополнительными требованиями (например, с определенным классом и т. Д.) через css.Довольно просто с jQuery.

$(document).ready(function() {
  $(".line").each(function(i, line) {
    $(line).children("strong.active:first, strong.active:last").addClass("highlight");
  });
});

.highlight {
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="line">
<strong class="dt_16 app_54 datum">1.6.</strong>
<strong class="dt_26 app_54 datum active">2.6.</strong>
<strong class="dt_36 app_54 datum active">3.6.</strong>
<strong class="dt_46 app_54 datum active">4.6.</strong>
<strong class="dt_56 app_54 datum">5.6.</strong>
<strong class="dt_66 app_54 datum active">6.6.</strong>
<strong class="dt_76 app_54 datum active">7.6.</strong>
<strong class="dt_86 app_54 datum active">8.6.</strong>
<strong class="dt_96 app_54 datum active">9.6.</strong>
<strong class="dt_106 app_54 datum">10.6.</strong>
</div>
<div class="line">
<strong class="dt_17 app_54 datum">1.7.</strong>
<strong class="dt_27 app_54 datum active">2.7.</strong>
<strong class="dt_37 app_54 datum active">3.7.</strong>
<strong class="dt_47 app_54 datum active">4.7.</strong>
<strong class="dt_57 app_54 datum active">5.7.</strong>
<strong class="dt_67 app_54 datum">6.7.</strong>
<strong class="dt_77 app_54 datum">7.7.</strong>
<strong class="dt_87 app_54 datum active">8.7.</strong>
<strong class="dt_97 app_54 datum active">9.7.</strong>
<strong class="dt_107 app_54 datum">10.7.</strong>
</div>

Причина, по которой это работает и что-то вроде:

.line > strong.active:first {
  background-color: yellow;
}

не работает, заключается в том, что механизм синтаксического анализа jQuery не работаетточно так же, как CSS-селекторы.: first в jQuery просто выбирает первый элемент после селекторов, где-as :first это css, буквально означает первый элемент независимо от селекторов, поэтому (CSS), если ваши селекторы удаляют элемент literal-first, тогда :first никогда не совпадает.