当前位置： 文江博客话题详情

如何选择具有特定类的最后一个元素，而不是父级中的最后一个子元素？

发布于 2024-12-02 17:56:09 字数 747 浏览 0 评论 0原文 

<div class="commentList">
   <article class="comment " id="com21"></article>
   <article class="comment " id="com20"></article>
   <article class="comment " id="com19"></article>
   <div class="something"> hello </div>
</div>

我想选择#com19？

.comment {
    width:470px;
    border-bottom:1px dotted #f0f0f0;
    margin-bottom:10px;
}

.comment:last-child {
    border-bottom:none;
    margin-bottom:0;
}

只要我有另一个 div.something 作为 commentList 中实际的最后一个子项，这就不起作用。在这种情况下是否可以使用最后一个子选择器来选择 article.comment 的最后一次出现？

jsFiddle

原文 
<div class="commentList">
   <article class="comment " id="com21"></article>
   <article class="comment " id="com20"></article>
   <article class="comment " id="com19"></article>
   <div class="something"> hello </div>
</div>

I want to select #com19 ?

.comment {
    width:470px;
    border-bottom:1px dotted #f0f0f0;
    margin-bottom:10px;
}

.comment:last-child {
    border-bottom:none;
    margin-bottom:0;
}

That does not work as long as I do have another div.something as actual last child in the commentList. Is it possible to use the last-child selector in this case to select the last appearance of article.comment?

jsFiddle

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（8）

冷夜 2024-12-09 17:56:09

:last-child 仅当相关元素是容器的最后一个子元素而不是特定类型元素的最后一个元素时才起作用。为此，您需要 :last-of -类型

http://jsfiddle.net/C23g6/3/

根据@BoltClock 的comment，这仅检查最后一个 article 元素，而不是最后一个具有 .comment 类的元素。

body {
  background: black;
}

.comment {
  width: 470px;
  border-bottom: 1px dotted #f0f0f0;
  margin-bottom: 10px;
}

.comment:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}
<div class="commentList">
  <article class="comment " id="com21"></article>

  <article class="comment " id="com20"></article>

  <article class="comment " id="com19"></article>

  <div class="something"> hello </div>
</div>

:last-child only works when the element in question is the last child of the container, not the last of a specific type of element. For that, you want :last-of-type

http://jsfiddle.net/C23g6/3/

As per @BoltClock's comment, this is only checking for the last article element, not the last element with the class of .comment.

body {
  background: black;
}

.comment {
  width: 470px;
  border-bottom: 1px dotted #f0f0f0;
  margin-bottom: 10px;
}

.comment:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}
<div class="commentList">
  <article class="comment " id="com21"></article>

  <article class="comment " id="com20"></article>

  <article class="comment " id="com19"></article>

  <div class="something"> hello </div>
</div>

回复 原文
巡山小妖精 2024-12-09 17:56:09

现在可以通过仔细使用 :has() 来解决这个问题，具体来说：

/* switch out the {class} below */
.{class}:not(:has(~ .{class}))

类似的技术还允许您选择除容器中最后一次出现的类之外的任何内容，或一组元素中的最后一次出现。有关示例，请参阅下面的代码片段。

注意：has() 目前在 Chrome、Edge、Safari 和 Safari 中受支持。 Firefox 至少自 2023 年 12 月起

/* last in group */
.class:has(+ :not(.class)) {
  background: pink;
}
/* anything but last in container */
.class:has(~ .class) {
  box-shadow: 0 0 0 1px #F00A;
}
/* last in container */
.class:not(:has(~ .class)) {
  background: #0F0A;
}
<div>
   <div class="class">not-last</div>
   <div class="class">not-last</div>
   <div class="class">last-in-group</div>
   <div>---</div>
   <div class="class">not-last</div>
   <div class="class">last-in-group</div>
   <div>---</div>
   <div class="class">last-class</div>
   <div>---</div>
</div>

2024 年 5 月注意事项：自 2023 年 3 月起，现在还提供了对 :nth-child(n of) 和 :nth-last-child 的基线支持（<选择器> 的 n）。请参阅 MDN 文档。

根据您的浏览器支持配置文件 - 权衡常绿与较旧的 safari 使用情况 - 此语法更清晰（专门用于此目的）并且可能得到更好的支持：

/* last item with .{class} */
:nth-last-child(1 of .{class})
/* first item with .{class} */
:nth-child(1 of .{class})

This can now be solved with careful use of :has(), specifically:

/* switch out the {class} below */
.{class}:not(:has(~ .{class}))

A similar technique also allows you to select anything but the last occurrence of a class in a container, or the last occurrence within a group of elements. See the snippet below for examples.

Note: has() is currently supported in Chrome, Edge, Safari & Firefox since at least Dec 2023

/* last in group */
.class:has(+ :not(.class)) {
  background: pink;
}
/* anything but last in container */
.class:has(~ .class) {
  box-shadow: 0 0 0 1px #F00A;
}
/* last in container */
.class:not(:has(~ .class)) {
  background: #0F0A;
}
<div>
   <div class="class">not-last</div>
   <div class="class">not-last</div>
   <div class="class">last-in-group</div>
   <div>---</div>
   <div class="class">not-last</div>
   <div class="class">last-in-group</div>
   <div>---</div>
   <div class="class">last-class</div>
   <div>---</div>
</div>

Note May 2024: Since March 2023 there is now also baseline support for :nth-child(n of <selector>) and :nth-last-child(n of <selector>). See the MDN docs.

Depending on your browser support profile - weighing up evergreen vs. older safari usage - this syntax is both clearer (it's intended for this purpose specifically) and potentially better supported:

/* last item with .{class} */
:nth-last-child(1 of .{class})
/* first item with .{class} */
:nth-child(1 of .{class})
回复 原文
半暖夏伤 2024-12-09 17:56:09

我猜最正确的答案是：使用 :nth-child （或者，在这种特定情况下，使用其对应的 :nth-last-child）。大多数人只知道该选择器的第一个参数是基于 n 的计算来获取一系列项目，但它也可以采用“[任何 CSS 选择器]”的第二个参数。

您的场景可以使用此选择器来解决： .commentList .comment:nth-last-child(1 of .comment)

但技术上正确并不意味着您可以使用它，因为此选择器目前仅在 Safari 中实现。

进一步阅读：

I guess that the most correct answer is: Use :nth-child (or, in this specific case, its counterpart :nth-last-child). Most only know this selector by its first argument to grab a range of items based on a calculation with n, but it can also take a second argument "of [any CSS selector]".

Your scenario could be solved with this selector: .commentList .comment:nth-last-child(1 of .comment)

But being technically correct doesn't mean you can use it, though, because this selector is as of now only implemented in Safari.

For further reading:

回复 原文
探春 2024-12-09 17:56:09

这在所有主流浏览器中都可以正常工作；

    /* target first element with class ".comment" */
    :nth-child(1 of .comment) {
        background-color: red;
    }

    /* target last element with class ".comment" */
    :nth-last-child(1 of .comment) {
        background-color: red;
    }
<div class="commentList">
 <div class="something"> hello </div>
 <article class="comment " id="com21">test</article>
 <article class="comment " id="com20">test</article>
 <article class="comment " id="com19">test</article>
 <div class="something"> hello </div>
</div>

This works fine in all major browsers;

    /* target first element with class ".comment" */
    :nth-child(1 of .comment) {
        background-color: red;
    }

    /* target last element with class ".comment" */
    :nth-last-child(1 of .comment) {
        background-color: red;
    }
<div class="commentList">
 <div class="something"> hello </div>
 <article class="comment " id="com21">test</article>
 <article class="comment " id="com20">test</article>
 <article class="comment " id="com19">test</article>
 <div class="something"> hello </div>
</div>

回复 原文
梦一生花开无言 2024-12-09 17:56:09

新的 :has() 伪类（尚未被所有浏览器支持）让您非常接近解决方案：

.class:has(+ :not(.class))

限制是这将找到任何带有 .class 后面跟着一个没有此类的元素。但这与问题的用例相匹配。

The new :has() pseudo class (not yet supported by all browsers) lets you get pretty close to a solution:

.class:has(+ :not(.class))

The limitation is that this will find any element with .class which is followed by an element that doesn't have this class. But this would match the use case of the question.

回复 原文
梦里人 2024-12-09 17:56:09

如果要浮动元素，则可以反转顺序

，即 float: right; 而不是 float: left;

然后使用此方法选择类的第一个子级。

/* 1: Apply style to ALL instances */
#header .some-class {
  padding-right: 0;
}
/* 2: Remove style from ALL instances except FIRST instance */
#header .some-class~.some-class {
  padding-right: 20px;
}

这实际上只是将类应用于最后一个实例，因为它现在的顺序相反。

这是一个适合您的工作示例：

<!doctype html>
<head><title>CSS Test</title>
<style type="text/css">
.some-class { margin: 0; padding: 0 20px; list-style-type: square; }
.lfloat { float: left; display: block; }
.rfloat { float: right; display: block; }
/* apply style to last instance only */
#header .some-class {
  border: 1px solid red;
  padding-right: 0;
}
#header .some-class~.some-class {
  border: 0;
  padding-right: 20px;
}
</style>
</head>
<body>
<div id="header">
  <img src="some_image" title="Logo" class="lfloat no-border"/>
  <ul class="some-class rfloat">
    <li>List 1-1</li>
    <li>List 1-2</li>
    <li>List 1-3</li>
  </ul>
  <ul class="some-class rfloat">
    <li>List 2-1</li>
    <li>List 2-2</li>
    <li>List 2-3</li>
  </ul>
  <ul class="some-class rfloat">
    <li>List 3-1</li>
    <li>List 3-2</li>
    <li>List 3-3</li>
  </ul>
  <img src="some_other_img" title="Icon" class="rfloat no-border"/>
</div>
</body>
</html>

If you are floating the elements you can reverse the order

i.e. float: right; instead of float: left;

And then use this method to select the first-child of a class.

/* 1: Apply style to ALL instances */
#header .some-class {
  padding-right: 0;
}
/* 2: Remove style from ALL instances except FIRST instance */
#header .some-class~.some-class {
  padding-right: 20px;
}

This is actually applying the class to the LAST instance only because it's now in reversed order.

Here is a working example for you:

<!doctype html>
<head><title>CSS Test</title>
<style type="text/css">
.some-class { margin: 0; padding: 0 20px; list-style-type: square; }
.lfloat { float: left; display: block; }
.rfloat { float: right; display: block; }
/* apply style to last instance only */
#header .some-class {
  border: 1px solid red;
  padding-right: 0;
}
#header .some-class~.some-class {
  border: 0;
  padding-right: 20px;
}
</style>
</head>
<body>
<div id="header">
  <img src="some_image" title="Logo" class="lfloat no-border"/>
  <ul class="some-class rfloat">
    <li>List 1-1</li>
    <li>List 1-2</li>
    <li>List 1-3</li>
  </ul>
  <ul class="some-class rfloat">
    <li>List 2-1</li>
    <li>List 2-2</li>
    <li>List 2-3</li>
  </ul>
  <ul class="some-class rfloat">
    <li>List 3-1</li>
    <li>List 3-2</li>
    <li>List 3-3</li>
  </ul>
  <img src="some_other_img" title="Icon" class="rfloat no-border"/>
</div>
</body>
</html>
回复 原文
感情废物 2024-12-09 17:56:09

我认为应该在这里评论对我有用的东西：

在需要的地方多次使用 :last-child ，以便它始终获得最后一个。

以此为例：

.page.one .page-container .comment:last-child {
  color: red;
}
.page.two .page-container:last-child .comment:last-child {
  color: blue;
}
<p> When you use .comment:last-child </p>
<p> you only get the last comment in both parents </p>

<div class="page one">
  <div class="page-container">
    <p class="comment"> Something </p>
    <p class="comment"> Something </p>
  </div>

  <div class="page-container">
    <p class="comment"> Something </p>
    <p class="comment"> Something </p>
  </div>
</div>

<p> When you use .page-container:last-child .comment:last-child </p>
<p> you get the last page-container's, last comment </p>

<div class="page two">
  <div class="page-container">
    <p class="comment"> Something </p>
    <p class="comment"> Something </p>
  </div>

  <div class="page-container">
    <p class="comment"> Something </p>
    <p class="comment"> Something </p>
  </div>
</div>

Something that I think should be commented here that worked for me:

Use :last-child multiple times in the places needed so that it always gets the last of the last.

Take this for example:

.page.one .page-container .comment:last-child {
  color: red;
}
.page.two .page-container:last-child .comment:last-child {
  color: blue;
}
<p> When you use .comment:last-child </p>
<p> you only get the last comment in both parents </p>

<div class="page one">
  <div class="page-container">
    <p class="comment"> Something </p>
    <p class="comment"> Something </p>
  </div>

  <div class="page-container">
    <p class="comment"> Something </p>
    <p class="comment"> Something </p>
  </div>
</div>

<p> When you use .page-container:last-child .comment:last-child </p>
<p> you get the last page-container's, last comment </p>

<div class="page two">
  <div class="page-container">
    <p class="comment"> Something </p>
    <p class="comment"> Something </p>
  </div>

  <div class="page-container">
    <p class="comment"> Something </p>
    <p class="comment"> Something </p>
  </div>
</div>

回复 原文
天邊彩虹 2024-12-09 17:56:09

这个解决方案怎么样？

div.commentList > article.comment:not(:last-child):last-of-type
{
    color:red; /*or whatever...*/
}

What about this solution?

div.commentList > article.comment:not(:last-child):last-of-type
{
    color:red; /*or whatever...*/
}
回复 原文
~没有更多了~

关于作者

云醉月微眠

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

胡图图

文章 0 评论 0

zt006

文章 0 评论 0

z祗昰~

文章 0 评论 0

冰葑

文章 0 评论 0

野の

文章 0 评论 0

天空

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文