>source

사용 :not(:last-child) 자식 요소에서레알마지막 요소 만 있으면같은 클래스같은 부모에서.

예는 이벤트 I주다 margin-bottom: 5px 모든 .blue 마지막을 제외한 요소 .blue 요소, 마지막 .blue 요소는 여전히 margin-bottom: 5px 스타일링.

누구든지이 작업을 수행하는 방법을 알고 있거나이를 방지하는 방법을 설명하는 문서를 제공합니다. 미리 감사드립니다.

.blue,
.red {
  background-color: #ccc;
  padding: 5px;
}
.blue {
  color: blue;
}
.red {
  color: red;
}
.blue:not(:last-child) {
  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>


  • 답변 # 1

    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>
    
    

  • 답변 # 2

    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>
    
    

관련 자료

  • 이전 python - 행 및 열 값을 사용하여 데이터 프레임에 데이터 추가
  • 다음 동일한 값을 가진 Java의 여러 엔티티 클래스에서 사용되는 serialVersionUID