发表新帖
发表新帖

CSS last-child selector: select last-element of specific class, not last child inside of parent?

前端 未结
关注
6 708
夕颜
夕颜 2020-11-22 01:45 

   

   


        

                      

              相关标签:
6条回答
  • 长情又很酷
    2020-11-22 02:24

    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:

    • https://drafts.csswg.org/selectors-4/#the-nth-child-pseudo
    • http://caniuse.com/#search=nth-child
    0 讨论(0)
  • 甜味超标
    2020-11-22 02:32

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

    0 讨论(0)
  • 野的像风
    2020-11-22 02:32

    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>

    0 讨论(0)
  • 暗喜
    2020-11-22 02:34

    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>
    0 讨论(0)
  • 广开言路
    2020-11-22 02:36

    What about this solution?

    div.commentList > article.comment:not(:last-child):last-of-type
{
    color:red; /*or whatever...*/
}
    0 讨论(0)
  • 礼貌的吻别
    2020-11-22 02:40

    if the last element type is article too, last-of-type will not work as expected.

    maybe i not really understand how it work.

    demo

    0 讨论(0)
 看不清?
提交回复
热议问题