: 마지막 자식이 예상대로 작동하지 않습니까?

: 마지막 자식이 예상대로 작동하지 않습니까?

---

문제는이 CSS와 HTML에 있습니다. 다음은 샘플 코드가있는 jsFiddle에 대한 링크 입니다.

HTML

<ul>
    <li class"complete">1</li>
    <li class"complete">2</li>
    <li>3</li>
    <li>4</li>
</ul>

CSS

li.complete:last-child {
    background-color:yellow;
}

li.complete:last-of-type {
    background-color:yellow;
}

이 CSS 라인 중 하나가 "complete"클래스 의 마지막 li 요소를 대상으로하지 않아야 합니까?

jQuery의이 쿼리는 다음 중 하나를 대상으로하지 않습니다.

$("li.complete:last-child");

그러나 이것은 다음을 수행합니다.

$("li.complete").last();

li {
  background-color: green;
}
li.complete:first-child {
  background-color: white;
}
li.complete:first-of-type {
  background-color: red;
}
li.complete:last-of-type {
  background-color: blue;
}
li.complete:last-child {
  background-color: yellow;
}

<ul>
  <li class="complete">1</li>
  <li class="complete">2</li>
  <li>3</li>
  <li>4</li>
</ul>

---

last-child선택은 부모의 마지막 자식 요소를 선택하는 데 사용됩니다. 주어진 상위 요소 아래에서 특정 클래스가있는 마지막 하위 요소를 선택하는 데 사용할 수 없습니다.

복합 선택기의 다른 부분 (앞에 첨부 됨 :last-child)은 마지막 하위 요소가 선택되기 위해 순서대로 충족해야하는 추가 조건을 지정합니다. 아래 스 니펫에서 선택한 요소가 나머지 복합 선택기에 따라 어떻게 다른지 확인할 수 있습니다.

.parent :last-child{ /* this will select all elements which are last child of .parent */
  font-weight: bold;
}

.parent div:last-child{ /* this will select the last child of .parent only if it is a div*/
  background: crimson;
}

.parent div.child-2:last-child{ /* this will select the last child of .parent only if it is a div and has the class child-2*/
  color: beige;
}

<div class='parent'>
  <div class='child'>Child</div>
  <div class='child'>Child</div>
  <div class='child'>Child</div>
  <div>Child w/o class</div>
</div>
<div class='parent'>
  <div class='child'>Child</div>
  <div class='child'>Child</div>
  <div class='child'>Child</div>
  <div class='child-2'>Child w/o class</div>
</div>
<div class='parent'>
  <div class='child'>Child</div>
  <div class='child'>Child</div>
  <div class='child'>Child</div>
  <p>Child w/o class</p>
</div>

---

귀하의 질문에 답하기 위해 아래는 li배경색을 빨간색으로 사용 하여 마지막 하위 요소의 스타일을 지정합니다 .

li:last-child{
    background-color: red;
}

(가) 기 때문에 다음 선택은 당신의 마크 업을 위해 작동하지 않을 last-child이없는 class='complete'그것이 비록 li.

li.complete:last-child{
    background-color: green;
}

li마크 업 의 마지막 에도 class='complete'.

---

주석 에서 쿼리를 처리하려면 다음을 수행하십시오 .

@Harry I find it rather odd that: .complete:last-of-type does not work, yet .complete:first-of-type does work, regardless of it's position it's parents element. Thanks for your help.

The selector .complete:first-of-type works in the fiddle because it (that is, the element with class='complete') is still the first element of type li within the parent. Try to add <li>0</li> as the first element under the ul and you will find that first-of-type also flops. This is because the first-of-type and last-of-type selectors select the first/last element of each type under the parent.

Refer to the answer posted by BoltClock, in this thread for more details about how the selector works. That is as comprehensive as it gets :)

---

:last-child will not work if the element is not the VERY LAST element

In addition to Harry's answer, I think it's crucial to add/emphasize that :last-child will not work if the element is not the VERY LAST element in a container. For whatever reason it took me hours to realize that, and even though Harry's answer is very thorough I couldn't extract that information from "The last-child selector is used to select the last child element of a parent."

Suppose this is my selector: a:last-child {}

This works:

<div>
    <a></a>
    <a>This will be selected</a>
</div>

This doesn't:

<div>
    <a></a>
    <a>This will no longer be selected</a>
    <div>This is now the last child :'( </div>
</div>

It doesn't because the a element is not the last element inside its parent.

It may be obvious, but it was not for me...

---

I encounter similar situation. I would like to have background of the last .item to be yellow in the elements that look like...

<div class="container">
  <div class="item">item 1</div>
  <div class="item">item 2</div>
  <div class="item">item 3</div>
  ...
  <div class="item">item x</div>
  <div class="other">I'm here for some reasons</div>
</div>

I use nth-last-child(2) to achieve it.

.item:nth-last-child(2) {
  background-color: yellow;
}

It strange to me because nth-last-child of item suppose to be the second of the last item but it works and I got the result as I expect. I found this helpful trick from CSS Trick

---

As last-child is used to select the last child element of a parent element. you can achieve same thing like this

<ul>
    <li class="complete" id="one">1</li>
    <li class="complete" id="two">2</li>
    <li>3</li>
    <li>4</li>
</ul>


li.complete#one{background-color:yellow;} 

li.complete#two{background-color:red;} 

give id to your list and then give the style or anything as you want

참고URL : https://stackoverflow.com/questions/18995362/last-child-not-working-as-expected