CSS - 스타일 ul의 마지막 3 li

ul에 7 li이 있습니다. 나는 첫 번째와 마지막으로 li을 스타일링 할 수 있다는 것을 알고 있지만 마지막 세 스타일을 적용 할 수 있습니까 li 님의 텍스트가 다른 색상입니까? 이 문제/딜레마를 처음 경험 한 것은 이번이 처음입니다. 나는 조금 주위에 인터넷 검색을했고, 나를 정말로 돕고있는 것을 많이 찾지 못했다.CSS - 스타일 ul의 마지막 3 li

<div class="international-portfolio"> 
<div class="international-portfolio-title"> Sales Representation International</div> 
<ul class="nobullet inline int-portfolio "> 
<li class="excelsior-hotel-ernst first"> 
<li class="le-mas-candille"> 
<li class="mandarin-oriental-hotel-group-worldwide"> 
<li class="victoria-jungfrau-grand-hotel-spa"> 
<li class="palace-luzern"> 
<li class="eden-au-lac"> 
<li class="bellevue-palace last"> 
</ul> 
</div>

ive는 코딩을 업데이트했으나 주어진 솔루션을 시도했지만 현재는 작동하지 않지만 계속 유지할 것입니다.

출처

2011-12-13 MJCoder

보기 : n 번째의 아이 -하지만 CSS3, 그래서 일관된 브라우저 지원은 아직 – ptriek

모두에서 지원 될 것 같다입니다 주요 브라우저 (IE 제외) : http://www.quirksmode.org/css/contents.html#t39 –

이 트릭을 할해야합니다 (IE의하지만 마음 당신이 그것을에서 작동하지 않습니다 이전 버전) 다음과 같이 http://reference.sitepoint.com/css/pseudoclass-nthlastchild

는 CSS 선택기를 사용

li:nth-last-child(-n+3) { 
    /*stuff here*/ 
}

여기 예입니다, 너무 : 는 http://jsfiddle.net/yAUwb/

출처

2011-12-13 15:41:20 Romanulus

Nice! (귀하의 바이올린은 -n + 4 대신 -n + 3을 사용합니다.) –

@Romanulus IE8과 IE7에서는 작동하지만 IE9에서는 작동합니다. – MJCoder

당신은 그것에 대해 알고 있습니다. 그러나 자바 스크립트에 익숙해지기 전에는 더 적은 브라우저에서 CSS를 통해 순수하게 끌 수 없습니다. 적어도 나는 생각한다. – Romanulus

당신은 사용할 수 있습니다

li:nth-last-child(1), li:nth-last-child(2), li:nth-last-child(3) { 
    color: red; 
}

출처

2011-12-13 15:45:30

단일 콜론 만 해당. – BoltClock

업데이트 됨. BoltClock 감사합니다. –

Romanulus 대답은 더 똑똑합니다. –

그것은이 코드를 좀 수의입니다

.myList li:nth-last-child(1), 
.myList li:nth-last-child(2), 
.myList li:nth-last-child(3) 
{ 
    color: red; 
}

데모 : 의사 클래스 http://jsfiddle.net/2np58/

출처

2011-12-13 15:46:47

CSS - 스타일 ul의 마지막 3 li

답변

관련 문제