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

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>

선택하고 싶 #com19습니까?

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

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

div.somethingcommentList에 실제 마지막 자식과 다른 자식이있는 한 작동하지 않습니다 . 이 경우 마지막 자식 선택기를 사용하여 마지막 모양을 선택할 수 article.comment있습니까?

jsFiddle

답변

:last-child문제의 요소가 특정 유형의 요소가 아닌 컨테이너의 마지막 자식 인 경우에만 작동합니다. 이를 위해, 당신은 원합니다:last-of-type

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

@BoltClock의 의견에 article따르면 클래스의 마지막 요소가 아닌 마지막 요소 만 확인합니다 .comment.

body {
  background: black;
}

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

.comment:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}
<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>

스 니펫 확장

답변

요소를 플로팅하는 경우 순서를 반대로 할 수 있습니다

즉 float: right;대신float: left;

그런 다음이 방법을 사용하여 클래스의 첫 번째 자식을 선택하십시오.

/* 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;
}

실제로 클래스를 LAST 인스턴스에 적용하는 것은 현재 순서가 반대이기 때문입니다.

다음은 실제 사례입니다.

<!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>

답변

가장 정확한 대답은 다음과 같습니다. Use :nth-child(또는이 경우에는 대응 :nth-last-child) 대부분 n을 사용한 계산을 기반으로 다양한 항목을 가져 오려면 첫 번째 인수로이 선택기를 알고 있지만 “[CSS 선택기]”의 두 번째 인수를 사용할 수도 있습니다.

이 선택기로 시나리오를 해결할 수 있습니다. .commentList .comment:nth-last-child(1 of .comment)

그러나이 선택기가 현재 Safari에서만 구현 되었기 때문에 기술적으로 정확하다고해서 사용할 수있는 것은 아닙니다.

더 읽을 거리 :

답변

내가 생각한 것은 여기에 나를 위해 일한 의견이어야합니다.

:last-child필요한 곳에서 여러 번 사용 하여 항상 마지막 부분을 얻습니다.

예를 들면 다음과 같습니다.

.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>

스 니펫 확장

답변

이 솔루션은 어떻습니까?

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

답변

마지막 요소 유형이 아티클 인 경우 last-of-type예상대로 작동하지 않습니다.

어쩌면 나는 그것이 어떻게 작동하는지 이해하지 못합니다.

데모

답변