Hướng dẫn css selector last child with class name - css selector con cuối cùng với tên lớp

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

Làm cách nào để chọn "đứa trẻ cuối cùng" với tên lớp: Danh sách?list?

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

Tôi biết ví dụ trên không hoạt động, nhưng có điều gì tương tự như thế này không?

IMPORTANT:

A) Tôi không thể sử dụng ul li:nth-child(3), bởi vì điều đó có thể xảy ra rằng nó ở vị trí thứ tư hoặc thứ năm.

b) Không có JavaScript.

Tylerh

21.2K59 Huy hiệu vàng74 Huy hiệu bạc93 Huy hiệu đồng59 gold badges74 silver badges93 bronze badges

hỏi ngày 19 tháng 6 năm 2011 lúc 8:06Jun 19, 2011 at 8:06

3

Bạn có thể sử dụng bộ chọn anh chị em liền kề để đạt được một cái gì đó tương tự, điều đó có thể giúp ích.

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

Sẽ nhắm mục tiêu hiệu quả phần tử sau ngay sau phần tử cuối cùng với lớp

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

Đọc thêm tại đây: https://css-tricks.com/almanac/selector/a/adjacent-sible/

Đã trả lời ngày 22 tháng 11 năm 2015 lúc 19:54Nov 22, 2015 at 19:54

Kenneth Lynnekenneth LynneKenneth Lynne

15.3K12 Huy hiệu vàng60 Huy hiệu bạc77 Huy hiệu đồng12 gold badges60 silver badges77 bronze badges

3

Đây là một câu trả lời táo bạo, nhưng nếu bạn chỉ bị ràng buộc với CSS và có thể đảo ngược các mục của bạn trong DOM, thì điều đó có thể đáng để xem xét. Nó dựa vào thực tế là mặc dù không có bộ chọn cho yếu tố cuối cùng của một lớp cụ thể, nhưng thực sự có thể tạo kiểu đầu tiên. Bí quyết là sau đó sử dụng Flexbox để hiển thị các phần tử theo thứ tự ngược lại.last element of a specific class, it is actually possible to style the first. The trick is to then use flexbox to display the elements in reverse order.

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>

Đã trả lời ngày 2 tháng 6 năm 2016 lúc 9:43Jun 2, 2016 at 9:43

Jokijokijoki

6.3062 Huy hiệu vàng21 Huy hiệu bạc28 Huy hiệu đồng2 gold badges21 silver badges28 bronze badges

3

Bạn không thể nhắm mục tiêu phiên bản cuối cùng của tên lớp trong danh sách của bạn mà không có JS.

Tuy nhiên, bạn có thể không hoàn toàn ngoài-CSS-luck, tùy thuộc vào những gì bạn muốn đạt được. Ví dụ: bằng cách sử dụng bộ chọn anh chị em tiếp theo, tôi đã thêm một bộ chia trực quan sau phần cuối cùng của các yếu tố

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

Đã trả lời ngày 22 tháng 6 năm 2016 lúc 4:32Jun 22, 2016 at 4:32

Reggie Pinkhamreggie PinkhamReggie Pinkham

11.2k3 Huy hiệu vàng35 Huy hiệu bạc34 Huy hiệu đồng3 gold badges35 silver badges34 bronze badges

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

hoặc

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

Đã trả lời ngày 24 tháng 3 năm 2017 lúc 14:55Mar 24, 2017 at 14:55

1

Tôi đề nghị bạn nên tận dụng thực tế là bạn có thể gán nhiều lớp cho một phần tử như vậy:

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

Phần tử cuối cùng có lớp

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

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

ul li.list {
    color: #FF0000;
}

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

Đã trả lời ngày 19 tháng 6 năm 2011 lúc 8:15Jun 19, 2011 at 8:15

IbuibuIbu

41.7K13 Huy hiệu vàng75 Huy hiệu bạc102 Huy hiệu đồng13 gold badges75 silver badges102 bronze badges

3

Làm cách nào để chọn đứa con cuối cùng của một lớp trong CSS?

Làm cách nào để có được 4 đứa con cuối cùng trong CSS?

Làm thế nào để bạn chọn mục cuối cùng trong CSS?

Làm thế nào để bạn chọn một phần tử có tên lớp?