CSS :last-child Selector doesn't work

Question

I use :last-child Selector but It's doesn't work. Example:

.last {background:blue;border-bottom:1px solid #cccccc;}

.last:last-child {background:red;border-bottom:0px solid #cccccc;}

jsfiddle example

Thanks every one's answer.

But I haver an other Question. jsfiddle example 2

.big_box {
  background:#eeeeee;
  height:500px;
}

.last {
  width:90%;
  margin:auto;
background: yellow;
 border-bottom: 1px solid #cccccc;
}
.last:last-child {
    background: red;
     border-bottom: 0px solid #cccccc;
}

<div class="big_box">
  <div class="other">the other paragraph.</div>
  <div class="last">The first paragraph.</div>
  <div class="last">The second paragraph.</div>
  <div class="last">The third paragraph.</div>
  <div class="last">The fourth paragraph.</div>
  <div class="other">the other paragraph.</div>
  <div class="other">the other paragraph.</div>
  <div class="other">the other paragraph.</div>
</div>

This is simply a jsfiddle quirk. Wrap your divs in a parent div and it works fine. — David L. Walsh, Aug 02 '17 at 03:44
Here there is a post with what you are trying to get https://stackoverflow.com/questions/7298057/css-last-child-selector-select-last-element-of-specific-class-not-last-child-i I think this post is duplicated — lucianov88, Aug 02 '17 at 04:07
@lucianov88 Thank you, but he used different type (div and article). — user1821062, Aug 02 '17 at 04:26

jhpratt · Answer 1 · 2017-08-02T04:18:48.107

4

What you need to do is use a wrapper element. Check it out when you use one.

JSFiddle

<div>
  <div class="last">The first paragraph.</div>
  <div class="last">The second paragraph.</div>
  <div class="last">The third paragraph.</div>
  <div class="last">The fourth paragraph.</div>
</div>

.

.last {
background: yellow;
 border-bottom: 1px solid #cccccc;
}
.last:last-child {
    background: red;
     border-bottom: 0px solid #cccccc;
}

edited Aug 02 '17 at 04:18

answered Aug 02 '17 at 03:47

jhpratt

6,841
16
40
50

Thanks for your answer, But I have other question. – user1821062 Aug 02 '17 at 03:54
https://jsfiddle.net/6dpodkkx/2/ In this example, It's doesn't work. But I don't know why... – user1821062 Aug 02 '17 at 03:55
AFAIK that doesn't work because of the complex way CSS parsers work. Unfortunately there's no way around that without using JS. – jhpratt Aug 02 '17 at 04:05
This answer is incorrect. `last-child` does indeed reference the child element. But `.last` was already a child. It was a child of the `body` element. – Michael Benjamin Aug 02 '17 at 04:05
If it was just a bug in jsFiddle, then it would work when on its own page. That's not the case. – jhpratt Aug 02 '17 at 04:08
Yes, you're right about that. Doesn't work in Stack Snippet either. I removed that section from my comment. – Michael Benjamin Aug 02 '17 at 04:09
Just keep in mind that your answer is premised on the idea that the divs are not already children in the HTML structure. They are, however. That's why your answer is incorrect. – Michael Benjamin Aug 02 '17 at 04:11

Ehsan · Answer 2 · 2017-08-02T05:05:36.263

3

Answer for Q1:(befor updated your post)

<div class="last">The fourth paragraph.</div> is one before the last no last because In Fiddle your code is like(Use Dev Tools):

<body>
  <div class="last">The first paragraph.</div>
  <div class="last">The second paragraph.</div>
  <div class="last">The third paragraph.</div>
  <div class="last">The fourth paragraph.</div>
  <script>...</script>
</body>

so, last child is <script> no <div class="last">The fourth paragraph.</div>.

for fix i use of:

.last:nth-last-child(2) {
    background: red;
     border-bottom: 0px solid #cccccc;
}

Demo

also,you can use of div:last-of-type :

Demo

Thankyou @Michael_B.

Answer for Q2:(after updated your post):

you must use of .last:nth-child(5) { :

Demo

edited Aug 02 '17 at 05:05

answered Aug 02 '17 at 03:47

Ehsan

12,655
3
25
44

Brilliant! This is the answer. (And it was staring me in the face with Dev Tools open on my screen! smh) .. Nice work! – Michael Benjamin Aug 02 '17 at 04:18
1

@Michael_B , you are welcome! – Ehsan Aug 02 '17 at 04:19
1

And the script element is last child in stack snippet also. – Michael Benjamin Aug 02 '17 at 04:20
1

`div:last-of-type` / `.last:last-of-type` would also work. https://jsfiddle.net/6dpodkkx/7/ – Michael Benjamin Aug 02 '17 at 04:24

score 0 · Answer 3 · answered Aug 02 '17 at 04:07

0

you should try this

.last{
  background:yellow;
  border-bottom:0px solid #cccccc;
}

.last div:last-child{
  background:red;
  border-bottom:1px solid #cccccc;
}

<div class="last">
  <div>The first paragraph.</div>
  <div>The second paragraph.</div>
  <div>The third paragraph.</div>
  <div>The fourth paragraph.</div>
</div>

answered Aug 02 '17 at 04:07

Twinkle

31
6

Note that this is *not* the same thing. In the original example each row had its own border. – jhpratt Aug 02 '17 at 04:23
The `last` class name makes no sense in this context. – ESR Aug 02 '17 at 04:27

CSS :last-child Selector doesn't work

3 Answers3