CSS를 사용하여 목록의 마지막 항목을 선택하는 방법이 있습니까?

문제

다음과 같은 목록이 있다고 가정해 보겠습니다.

목록의 마지막 항목을 직접 선택할 수 있는 CSS 선택기가 있습니까?이 경우 항목 3.

건배!

해결책

내가 아는 바는 아니다.전통적인 솔루션은 식별할 수 있도록 첫 번째 및 마지막 항목에 class="first" & class="last" 태그를 지정하는 것입니다.

CSS 의사 클래스 첫째 아이 첫 번째 항목을 얻을 수 있지만 모든 브라우저가 이를 지원하는 것은 아닙니다.CSS3는 막내도 마찬가지 (현재 Firefox, Safari에서는 지원되지만 IE 6/7/beta 8에서는 지원되지 않습니다.)

다른 팁

제대로 지원될 때까지 제안된 대로 '마지막' 항목에 클래스를 추가해야 합니다.하지만 이 작업을 수동으로 수행할 필요는 없습니다.자바스크립트를 사용할 수 있다면 다음 중 하나를 살펴보세요.

어느 쪽이든 마크업을 '오염'시키는 것을 방지할 수 있으며 스타일이 '필수' 디자인 기능이 아닌 '좋은 추가'인 경우 완벽하게 허용됩니다.

이 질문에 대한 답변을 업데이트해야 합니다!IE9 + Firefox(당시) + Chrome, Safari 모두 지원: last-of-type 또는 last-child

라이센스 : CC-BY-SA ~와 함께 속성

제휴하지 않습니다 StackOverflow