如何在 CSS 中选择具有特定类名的“最后一个孩子”？

How do I select the "last child" with a specific class name in CSS?

提问by

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

How do I select the "last child" with the class name: list?

如何使用类名选择“最后一个孩子”：list？

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

I know the example above doesn't work, but is there anything similar to this that does work?

我知道上面的例子行不通，但是有没有类似的东西行得通？

IMPORTANT:

重要的：

a) I can't use ul li:nth-child(3), because it could happen that it's on the fourth or fifth place too.

a) 我不能使用ul li:nth-child(3)，因为它也可能位于第四或第五位。

b) No JavaScript.

b) 没有 JavaScript。

采纳答案by Ibu

I suggest that you take advantage of the fact that you can assign multiple classes to an element like so:

我建议您利用这样一个事实，即您可以将多个类分配给一个元素，如下所示：

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

The last element has the listclass like its siblings but also has the lastclass which you can use to set any CSS property you want, like so:

最后一个元素list与它的兄弟元素一样具有last类，但也具有可用于设置所需的任何 CSS 属性的类，如下所示：

ul li.list {
    color: #FF0000;
}

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

回答by Chase

This can be done using an attribute selector.

这可以使用属性选择器来完成。

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

The class~selects a specific whole word. This allows your list item to have multiple classes if need be, in various order. It'll still find the exact class "list" and apply the style to the last one.

在class~选择特定的整个单词。这允许您的列表项在需要时以不同的顺序具有多个类。它仍然会找到确切的类“列表”并将样式应用于最后一个。

See a working example here: http://codepen.io/chasebank/pen/ZYyeab

在此处查看一个工作示例：http: //codepen.io/chasebank/pen/ZYyeab

Read more on attribute selectors:

阅读有关属性选择器的更多信息：

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

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

回答by joki

This is a cheeky answer, but if you are constrained to CSS only and able to reverse your items in the DOM, it might be worth considering. It relies on the fact that while there is no selector for the lastelement 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.

这是一个厚颜无耻的答案，但如果您仅限于使用 CSS 并且能够在 DOM 中反转您的项目，则可能值得考虑。它依赖于这样一个事实，即虽然特定类的最后一个元素没有选择器，但实际上可以设置第一个. 诀窍是然后使用 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>

回答by Kenneth Lynne

You can use the adjacent sibling selector to achieve something similar, that might help.

您可以使用相邻的兄弟选择器来实现类似的功能，这可能会有所帮助。

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

Will effectively target the immediately following element after the last element with the class other-class.

将有效地针对类的最后一个元素之后紧随其后的元素other-class。

Read more here: https://css-tricks.com/almanac/selectors/a/adjacent-sibling/

在此处阅读更多信息：https: //css-tricks.com/almanac/selectors/a/adjacent-sibling/

回答by Reggie Pinkham

You can't target the last instance of the class name in your list without JS.

如果没有 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 .listelements here: http://jsbin.com/vejixisudo/edit?html,css,output

但是，您可能不会完全失去 css 运气，这取决于您想要实现的目标。例如，通过使用下一个兄弟选择器，我在你的最后一个.list元素之后添加了一个视觉分隔符：http: //jsbin.com/vejixisudo/edit?html,css,output

回答by flen

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

使用这个选择器：ul > li:last-of-type。这将选择<li>无序列表 ( <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>).

答案分解：我只选择>无序列表 ( <ul>)<li>的子元素 ( <ul>) ，它是父元素 ( ) 中最后一个类型 ( ) 的子元素。

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

您可以使用 Id 或类将选择器限制为某些无序列表。例如：ul.my-class > li:last-of-type将<li>仅从该类的无序列表中选择最后一个

回答by vsync

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

假设我们去隐藏列表中低于索引的所有元素 3

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

CSS

CSS

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

Live Demo

现场演示

This will get rid of the need to add a hideclass 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-typewhich cannot work with Class names. you must re-think your approach of classifying things

这将不再需要为hide所有需要隐藏的元素添加一个类，所以我们只剩下一个类，hide，它控制着所有元素。现在，您不需要使用last-of-type不能与类名称一起使用的。你必须重新考虑你对事物进行分类的方法

回答by J ZHOU

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

or

或者

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