css - 자식 요소에` - not (: last-child)`를 사용하면 실제 마지막 요소를 건너 뛰지 않습니다

MDN에서 :

The :last-child CSS pseudo-class represents the last element among a group of sibling elements.

특정 클래스의 마지막을 참조하지 않습니다. 선택자 .blue:not(:last-child) 모든 요소와 일치합니다. .blue 에 의해 캡슐화 된 NodeList의 마지막 자식이 아닙니다. .box . 귀하의 예에서 last-child 두 번째 의미 .red 요소.

실제로 특정 클래스 또는 선택 자의 마지막으로 선택할 수는 없습니다. 우리가 가진 가장 가까운 것은 last-of-type 이름에서 알 수 있듯이 특정 요소 유형의 마지막을 선택합니다. 예를 들면 :

h2:last-of-type {
  color: red;
}

<h2>First Heading</h2>
<h2>Second Heading</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>

The :last-child CSS pseudo-class represents the last element among a group of sibling elements.^Ref

없다"최종 수업"selector existing ... 해당 요소를 대상으로하는 유일한 방법은 특정 클래스를 추가하는 것입니다.

마크 업에서 수동으로 수행하는 대신 JavaScript를 사용하여 수행 할 수 있습니다.

let all_blue = document.querySelectorAll(".blue");
Array.from(all_blue).slice(-1)[0].classList.add("last-blue");

.blue,
.red {
  background-color: #ccc;
  padding: 5px;
}
.blue {
  color: blue;
}
.red {
  color: red;
}
.blue:not(.last-blue) { /* .last-blue is used here */
  margin-bottom: 5px;
}

<div class="box">
  <div class="blue">first blue text</div>
  <div class="blue">blue text2</div>
  <div class="blue">blue text3</div>
  <div class="blue">blue text4</div>
  <div class="blue">last blue text</div>
  <div class="red">red text</div>
  <div class="red">red text</div>
</div>