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

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

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

b) No JavaScript.

144374 次浏览
小开
最佳答案

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

<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 list class like its siblings but also has the last class which you can use to set any CSS property you want, like so:

ul li.list {
color: #FF0000;
}


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

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

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

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

See a working example here: 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

小开

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

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

将有效地以类 other-class的最后一个元素之后紧跟的元素为目标。

阅读更多: https://css-tricks.com/almanac/selectors/a/adjacent-sibling/

小开

这是一个厚颜无耻的回答，但是如果您仅限于 CSS，并且能够在 DOM 中反转项目，那么可能值得考虑。它依赖于这样一个事实: 虽然没有针对特定类的 last元素的选择器，但实际上可以对 第一进行样式化。诀窍是，然后使用弹性框显示的元素，以相反的顺序。

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>

小开

在没有 JS 的情况下，不能以列表中类名的最后一个实例为目标。

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

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

或者

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

提交答案