2008-09-09 12 views
10

다음과 같이 내가 목록을 가지고 말 : 내가 직접 목록의 마지막 항목을 선택할 수 있도록하는 CSS 선택기CSS를 사용하여 목록의 마지막 항목을 선택하는 방법이 있습니까?

  • 항목 1
  • 항목 2
  • 항목 3

있습니까? 이 경우 항목 3입니다.

건배!

+0

이전에 li : last-child 선택기를 실행했습니다. 그러나 IE에서 작동하지 않기 때문에 사용할 수 없습니다. 이 경우 HTML에 대한 제어권이 없으므로 첫 번째 및 마지막 하위 태그에 태그를 지정할 수 없습니다. – Marcel

+0

이 경우 나는 당신이 원하는 것을하기 위해이 일을하지 않을 것을 두려워합니다. 당신이 그걸 통제 할 수 있다면 자바 스크립트로 할 수 있고 그 길을 내려 가고 싶지만 용과 어둡고 무서운 길입니다) –

+0

2013 년 브라우저 지원에 대한 정답은 OZZIE입니다. 구식 답변은 Glenn Slaven입니다. – gorbysbm

답변

15

나는 알고 있습니다. 기존의 해결책은 첫 번째 &의 마지막 항목에 class = "first"& class = "last"태그를 붙이면 식별 할 수 있습니다.

CSS psudo-class first-child은 첫 번째 항목을 제공하지만 모든 브라우저에서 지원하지는 않습니다. CSS3에 last-child too이 있습니다 (현재 Firefox, Safari에서는 지원되지만 IE 6/7/베타 8에서는 지원되지 않습니다).

6

제대로 지원 될 때까지 제안 된대로 '마지막'항목에 클래스를 추가해야합니다. 이 작업은 수동으로 수행 할 필요가 없습니다. 당신은 자바 스크립트 타격을 할 수있는 경우, 하나 살펴 보도록 :

어느 것 당신의 마크 업을 '오염시키는'일을 피하고, '꼭 있어야만하는'디자인 기능과는 반대로 당신의 스타일이 '멋진 추가'라면 완벽하게 받아 들일 수 있습니다.

+0

x- 플랫폼 지원을 원할 경우 여전히 그렇습니다. –

+0

"Keeping Your ..."라는 두 번째 링크가 작동했습니다! –

+0

+1 for jQuery reference. 많은 제품/템플릿 스키닝 연습 에서처럼 마크 업을 제어하지 않으면 광범위한 x-browser 호환성으로 성공하는 유일한 방법 (그리고 가장 쉬운 방법)입니다. – cdonner

3

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