CSS에서 특정 클래스 이름이있는 "마지막 자식"을 어떻게 선택합니까?

CSS에서 특정 클래스 이름이있는 "마지막 자식"을 어떻게 선택합니까? [복제]

---

이 질문에 이미 답변이 있습니다.

• : nth-child () 또는 : nth-of-type ()을 임의의 선택기와 결합 할 수 있습니까? 6 답변

<ul>
    <li class="list">test1</li>
    <li class="list">test2</li>
    <li class="list">test3</li>
    <li>test4</li>
</ul>

클래스 이름 : 목록으로 "마지막 자식"을 어떻게 선택 합니까?

<style>
    ul li.list:last-child{background-color:#000;}
</style>

위의 예가 작동하지 않는다는 것을 알고 있지만 이와 유사한 작동하는 것이 있습니까?

중대한:

a)를 사용할 수 없습니다 ul li:nth-child(3). 왜냐하면 4 위 또는 5 위에있을 수도 있기 때문입니다.

b) JavaScript 없음.

어떤 도움을 주시면 감사하겠습니다!

---

다음과 같이 요소에 여러 클래스를 할당 할 수 있다는 사실을 활용하는 것이 좋습니다.

<ul>
    <li class="list">test1</li>
    <li class="list">test2</li>
    <li class="list last">test3</li>
    <li>test4</li>
</ul>

마지막 요소에는 list형제와 같은 클래스 가 있지만 last다음과 같이 원하는 CSS 속성을 설정하는 데 사용할 수 있는 클래스 도 있습니다 .

ul li.list {
    color: #FF0000;
}

ul li.list.last {
    background-color: #000;
}

---

속성 선택기를 사용하여 수행 할 수 있습니다.

[class~='list']:last-of-type  {
    background: #000;
}

는 class~특정 전체 단어를 선택합니다. 이렇게하면 목록 항목이 필요한 경우 다양한 순서로 여러 클래스를 가질 수 있습니다. 여전히 정확한 클래스 "목록"을 찾고 스타일을 마지막 클래스에 적용합니다.

여기에서 작동하는 예를 참조하십시오 : http://codepen.io/chasebank/pen/ZYyeab

속성 선택자에 대해 자세히 알아보세요.

http://css-tricks.com/attribute-selectors/ http://www.w3schools.com/css/css_attribute_selectors.asp

---

이것은 건방진 대답이지만 CSS에만 제한되어 있고 DOM에서 항목을 되돌릴 수 있다면 고려할 가치가 있습니다. 특정 클래스 의 마지막 요소에 대한 선택기가 없지만 실제로 첫 번째 .NET Framework의 스타일을 지정할 수 있다는 사실에 의존합니다 . 트릭은 flexbox를 사용하여 요소를 역순으로 표시하는 것입니다.

ul {
  display: flex;
  flex-direction: column-reverse;
}

/* Apply desired style to all matching elements. */
ul > li.list {
  background-color: #888;
}

/* Using a more specific selector, "unstyle" elements which are not the first. */
ul > li.list ~ li.list {
  background-color: inherit;
}

<ul>
  <li class="list">0</li>
  <li>1</li>
  <li class="list">2</li>
</ul>
<ul>
  <li>0</li>
  <li class="list">1</li>
  <li class="list">2</li>
  <li>3</li>
</ul>

---

인접한 형제 선택기를 사용하여 유사한 결과를 얻을 수 있습니다.

.list-item.other-class + .list-item:not(.other-class)

클래스의 마지막 요소 바로 뒤의 요소를 효과적으로 대상으로 지정합니다 other-class.

자세한 내용은 https://css-tricks.com/almanac/selectors/a/adjacent-sibling/에서 확인 하십시오.

---

JS 없이는 목록에서 클래스 이름의 마지막 인스턴스를 대상으로 지정할 수 없습니다.

However, you may not be entirely out-of-css-luck, depending on what you are wanting to achieve. For example, by using the next sibling selector, I have added a visual divider after the last of your .list elements here: http://jsbin.com/vejixisudo/edit?html,css,output

---

Use this selector: ul > li:last-of-type . This will select every last list item (<li>) in an unordered list (<ul>).

Breakdown of the answer: I'm selecting only the child (>) of an unordered list (<ul>) that is the last child of its type (<li>) from the parent element (<ul>).

You can use an Id or class to restrict the selector to certain unordered lists. For example: ul.my-class > li:last-of-type will choose the last <li> only from the unordered lists of that class

---

There is a workaround (in specific situations) to this problem:

While this doesn't answer the question directly, there is a high probability this way of thinking achieves the same goal:

Lets say we went to hide all elements in the list that are lower than index 3

<ul>
    <li>test1</li>
    <li>test2</li>
    <li class="hide">test3</li>
    <li>test4</li>
    <li>test5</li>
</ul>

CSS

li{ display:none; }
li.hide ~ li{ display:block; }

Live Demo

This will get rid of the need to add a hide class to all elements which needs to be hidden, so we are left with just one class, hide, which rules them all. now, you don't need to use the last-of-type which cannot work with Class names. you must re-think your approach of classifying things

---

$('.class')[$(this).length - 1] 

or

$( "p" ).last().addClass( "selected" );

참고URL : https://stackoverflow.com/questions/6401268/how-do-i-select-the-last-child-with-a-specific-class-name-in-css