Выбрать последний элемент без класса в серии вложенных групп - пример html js css

• HTML код


• CSS код
• JS код
• Результат кода

<main class="wrapper">

  <ul class="list">

    <li class="list-item">1</li>

    <li class="list-item skip">2</li>

    <li class="list-item">3</li>

  </ul>

  <ul class="list">

    <li class="list-item skip">4</li>

    <li class="list-item">5</li>

    <li class="list-item skip">6</li>

  </ul>

  <ul class="list">

    <li class="list-item skip">7</li>

    <li class="list-item skip">8</li>

    <li class="list-item">9</li>

  </ul>

  <ul class="list">

    <li class="list-item skip">10</li>

    <li class="list-item">11</li>

    <li class="list-item skip">12</li>

  </ul>

</main>

html {

  box-sizing: border-box;

}



*, *::before, *::after {

  box-sizing: inherit;

}

*:focus, *::before:focus, *::after:focus {

  outline: none;

}



* {

  font-family: monaco, courier;

}



body {

  margin: 0;

  padding: 0;

}



p {

  margin: 0;

  padding: 1rem;

  color: darkslategray;

}



.wrapper {

  width: 100%;

  min-height: 100vh;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  background: #ddd;

}



.list {

  width: 400px;

  margin: 4px;

  padding: 0;

  list-style-type: none;

  background: BlanchedAlmond;

}



.list-item {

  margin: 4px;

  padding: 4px;

  font-size: 12px;

  background: PeachPuff;

}

.list-item.skip {

  border-bottom: 2px solid tan;

}

.list-item.active-last {

  background: gold;

}

$(document).ready(function () {

  console.log("document ready");

  $(".list-item:not(.skip)").last().addClass("active-last");

});

//# sourceURL=pen.js