CODEWITHSUNDEEP
csscss-selectors
user2383083
user2383083

Reputation:

css last-child not working as it should

In my site, every post has a bottom border. I've applied a

article:last-child {border-bottom:none;}

so that the last post doesn't have a border at the bottom, but it's still showing.

What am I doing wrong?

Upvotes: 1

Views: 98

Answers (2)

Win
Win

Reputation: 62260

last-child is not available in IE 8. article tag can be still solved by using modernizr.

To make backward compatible, you want to use first-child - 

article { border-top: 1px solid #eee; }
article:first-child { border-top: none;}

This is what your current website look like in IE 8.

enter image description here

Upvotes: 1

Mr. Alien
Mr. Alien

Reputation: 157314

last-child will fail if you have any element other than article so use last-of-type instead.

Because the last-child is nav on your website, CSS will look for last article child but the last child is nav hence the selector goes wrong.

Where on the other hand last-of-type will select the last article element of it's parent.

Use this instead and it will work for sure

.content-pad-left article:last-of-type {
   border-bottom:none;
}

Upvotes: 2

Related Questions