CSS 마지막 자식 선택기 : 부모 클래스의 마지막 자식 요소가 아닌 특정 클래스의 마지막 요소를 선택 하시겠습니까?

109

<div class="commentList"> 
    <article class="comment " id="com21"></article> 
    <article class="comment " id="com20"></article> 
    <article class="comment " id="com19"></article> 
    <div class="something"> hello </div> 
</div>

#com19을 선택하고 싶습니까? commentList 실제 마지막 자식 같은 다른 div.something을 한 내가 할대로 작동하지 않습니다CSS 마지막 자식 선택기 : 부모 클래스의 마지막 자식 요소가 아닌 특정 클래스의 마지막 요소를 선택 하시겠습니까?

.comment { 
    width:470px; 
    border-bottom:1px dotted #f0f0f0; 
    margin-bottom:10px; 
} 

.comment:last-child { 
    border-bottom:none; 
    margin-bottom:0; 
}

. 이 경우 마지막 자식 선택기를 사용하여 마지막 모양을 article.comment으로 선택할 수 있습니까? 문제의 요소가 컨테이너의 마지막 자식 요소의 특정 유형의 마지막이 아닌 경우

jsFiddle

출처

2011-09-04 matt

160

:last-child에만 작동합니다. 이를 위해, 당신은 @ BoltClock의 주석 사항에 따라 :last-of-type

http://jsfiddle.net/C23g6/3/

를 원하는,이 마지막 article 요소 .comment의 클래스와하지의 마지막 요소를 확인한다.

HTML

<div class="commentList"> 
    <article class="comment " id="com21"></article> 

    <article class="comment " id="com20"></article> 

    <article class="comment " id="com19"></article> 

    <div class="something"> hello </div> 
</div>

CSS

body { 
    background: black; 
} 

.comment { 
    width:470px; 
    border-bottom:1px dotted #f0f0f0; 
    margin-bottom:10px; 
} 

.comment:last-of-type { 
    border-bottom:none; 
    margin-bottom:0; 
}

출처

2011-09-04 08:17:03 Chris

+81

그것은 클래스에 보이지 않는하지만, 단지 유형을, 당신은거야 같은 클래스가 아닌 기사가하는 일이 그래서 만약 예상치 못한 결과가 발생합니다. – BoltClock

사실, 여기에 나와 있습니다. http://jsfiddle.net/YmMZZ/1/ – Chris

제대로 작동합니다. 그러나 클래스별로 요소를 좁혀 야하는 경우에는 다시 작동하지 않습니다. http://jsfiddle.net/aliemreeee/a4H7f/2/ –

당신이 요소를 부유하는 경우 주문 후

즉 float: right; 대신 float: left;

그리고이 방법을 사용을 취소 할 수 있습니다 첫 번째 칠을 선택하다 클래스의 d.

/* 1: Apply style to ALL instances */ 
#header .some-class { 
    padding-right: 0; 
} 
/* 2: Remove style from ALL instances except FIRST instance */ 
#header .some-class~.some-class { 
    padding-right: 20px; 
}

이것은 역순으로 진행 되었기 때문에 클래스를 마지막 인스턴스에만 적용합니다. 어떤이 솔루션에 대한

<!doctype html> 
<head><title>CSS Test</title> 
<style type="text/css"> 
.some-class { margin: 0; padding: 0 20px; list-style-type: square; } 
.lfloat { float: left; display: block; } 
.rfloat { float: right; display: block; } 
/* apply style to last instance only */ 
#header .some-class { 
    border: 1px solid red; 
    padding-right: 0; 
} 
#header .some-class~.some-class { 
    border: 0; 
    padding-right: 20px; 
} 
</style> 
</head> 
<body> 
<div id="header"> 
    <img src="some_image" title="Logo" class="lfloat no-border"/> 
    <ul class="some-class rfloat"> 
    <li>List 1-1</li> 
    <li>List 1-2</li> 
    <li>List 1-3</li> 
    </ul> 
    <ul class="some-class rfloat"> 
    <li>List 2-1</li> 
    <li>List 2-2</li> 
    <li>List 2-3</li> 
    </ul> 
    <ul class="some-class rfloat"> 
    <li>List 3-1</li> 
    <li>List 3-2</li> 
    <li>List 3-3</li> 
    </ul> 
    <img src="some_other_img" title="Icon" class="rfloat no-border"/> 
</div> 
</body> 
</html>

출처

2013-07-29 00:59:06 Ozzy

플로팅 요소가 다음 줄에 푸시 된 경우에는 작동하지만 참고로 충분합니다 (즉, 수평 공간이 충분하지 않음 참조). float-right/left) – Ozzy

: 여기

는 작업 당신을위한 예입니다? (이 특정한 경우의 대응 :nth-last-child에서, 또는) 사용 :nth-child :

div.commentList > article.comment:not(:last-child):last-of-type 
{ 
    color:red; /*or whatever...*/ 
}

출처

2015-04-09 10:12:33 lsblsb

'last-child'앞에 콜론이 필요합니다. – Austen

맞습니다. 오식. 감사. 편집 됨. – lsblsb

@lsblsb, 여기에'article'을 사용합니다. 그래서 주어진 예제에서는 not (: last-child)가 필요하지 않습니다. –

내가 가장 정답이라고 생각한다. 대부분의 경우이 n 번째 계산을 기반으로 항목 범위를 잡는 첫 번째 인수로이 선택기를 알고 있지만 두 번째 인수 인 "[any CSS selector]"를 사용할 수도 있습니다.

귀하의 시나리오는이 셀렉터로 해결할 수 : .commentList .comment:nth-last-child(1 of .comment)

그러나 기술적으로 정확되는 것은이 셀렉터는 이제 사파리에서 구현 기준으로하기 때문에 당신은하지만, 그것을 사용할 수있는 것은 아닙니다.필요한 장소에서

사용 :last-child 여러 번 : 나는 나를 위해 일한이 여기에 주석해야한다고 생각

출처

2017-08-17 13:01:19 hurrtz

뭔가 : 더 읽기

그래서 그것은 항상 최후의 마지막 것을 얻는다.

예를 들어이 걸릴 :

.page.one .page-container .comment:last-child { 
 
    color: red; 
 
} 
 
.page.two .page-container:last-child .comment:last-child { 
 
    color: blue; 
 
}

<p> When you use .comment:last-child </p> 
 
<p> you only get the last comment in both parents </p> 
 

 
<div class="page one"> 
 
    <div class="page-container"> 
 
    <p class="comment"> Something </p> 
 
    <p class="comment"> Something </p> 
 
    </div> 
 

 
    <div class="page-container"> 
 
    <p class="comment"> Something </p> 
 
    <p class="comment"> Something </p> 
 
    </div> 
 
</div> 
 

 
<p> When you use .page-container:last-child .comment:last-child </p> 
 
<p> you get the last page-container's, last comment </p> 
 

 
<div class="page two"> 
 
    <div class="page-container"> 
 
    <p class="comment"> Something </p> 
 
    <p class="comment"> Something </p> 
 
    </div> 
 

 
    <div class="page-container"> 
 
    <p class="comment"> Something </p> 
 
    <p class="comment"> Something </p> 
 
    </div> 
 
</div>

출처

2017-11-22 01:53:30 Jesus

오, 아들 아! 어디 계셨습니까? –

@ManojKumar everywhere 내 아이 – Jesus

큰 그룹이 재림을 기다리고있을 때 지구상의 활동은 무엇입니까? –

CSS 마지막 자식 선택기 : 부모 클래스의 마지막 자식 요소가 아닌 특정 클래스의 마지막 요소를 선택 하시겠습니까?

답변

관련 문제