사용
: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
- 답변 # 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>
관련 자료
- 파이썬에서 목록 이해를 사용하여 목록의 요소 발생 수를 계산하는 방법은 무엇입니까?
- json - 자식 요소를 추출하고 부모 필드를 추가합니다
- xpath - FLWOR 쿼리를 사용하여 XML 파일의 요소에서 해당 데이터를 병합하는 방법은 무엇입니까?
- html - PHP에서 DOM을 사용하여 요소의 텍스트를 가져 오지만 오류를 반환합니다
- javascript - 인형과 함께 x/y 좌표를 사용하여 요소를 클릭하는 방법은 무엇입니까?
- reactjs - 자식 요소의 참조에 액세스하는 방법
- python - 목록에서 현재 요소보다 큰 모든 요소 찾기
- javascript - reduce 메서드를 사용하여 각 하위 배열의 마지막 요소 곱하기
- python - 빈 요소에 대한 목록 요소를 비교하는 방법은 무엇입니까?
- r - purrr - : keep을 사용하여 na가있는 목록 요소 이름 추출
- Selenium 및 Python을 사용하여 요소의 href 속성을 가져 오는 방법
- javascript - 첫 번째 요소를 나머지 요소와 비교하고 두 번째 요소를 나머지 요소 및 동일한 반복과 어떻게 비교할 수 있습니까?
- python - Selenium을 사용하여 클릭 할 수있는 요소의 href 속성을 얻을 수없는 이유
- javascript - jquery 클릭 기능을 사용할 때 다른 요소 재설정을 기본값으로 수정하는 방법
- android - 어댑터를 사용할 때 클릭해야하는 요소
- c# - 자식 요소 내부에 속성을 바인딩하는 방법은 무엇입니까?
- python - 셀레늄을 사용하여 ID, 값 및 유형이없는 요소 (버튼)를 찾는 방법은 무엇입니까?
- Javascript를 사용하여 JSON 요소의 하위 항목을 가져 오시겠습니까?
- javascript - appendChild를 사용하여 요소를 이동하는 것이 JS에서 작동하지 않는 이유
MDN에서 :
특정 클래스의 마지막을 참조하지 않습니다. 선택자
.blue:not(:last-child)
모든 요소와 일치합니다..blue
에 의해 캡슐화 된 NodeList의 마지막 자식이 아닙니다..box
. 귀하의 예에서last-child
두 번째 의미.red
요소.실제로 특정 클래스 또는 선택 자의 마지막으로 선택할 수는 없습니다. 우리가 가진 가장 가까운 것은
last-of-type
이름에서 알 수 있듯이 특정 요소 유형의 마지막을 선택합니다. 예를 들면 :