:last-child won’t target

[alexmccabe]

Normally I don’t have any issues with CSS, however this one has me completely stumped!

If you take a look at [this pen](http://codepen.io/alexmccabe/pen/Esurd “this pen”), you can see that there are 5 . hr div classes. In the CSS the last one should be hidden, but it won’t. I set the colour to red just to see if it was being targeted at all. And it is not.

Anyone have any ideas? Would be much appreciated. Causing me actual issues in my project. I can target it using nth-child(n) but I don’t know how many children there will be. Bloody odd.

first-child doesn’t work either.

[Watson90]

Hi @alexmccabe

You can use this;

.hr:last-of-type

like so – http://codepen.io/anon/pen/lIxqD

[Paulie_D]

You’re using the the wrong pseudo class

.hr:last-of-type

EDIT…Aw, SNAP

Browser support ain’t great though.

[Watson90]

I think last child only works if it has a parent element such as an unordered list with 5 list items, if you wanted to target the last item, you would then use last-child.

[Paulie_D]

Because each item is not a child of anything.

EDIT: FFS….SNAP again.

[Paulie_D]

OK….here’s something…why create a div with that class instead of just styling your ‘hr’ tag?

CSS Tricks does.

See:

---

[Watson90]

Lol :)

Yeah I’d agree with @Paulie_D on this one, its just much more simple and a lot less markup (which is always a good thing)

[Watson90]

Shouldn’t your css be as simple as;

border: 0px none;
height: 1px;
background: -moz-linear-gradient(left center , transparent, rgba(0, 0, 0, 0.5), transparent) repeat scroll 0% 0% transparent;
margin: 35px 0px 33px;

just like Chris uses…

[Paulie_D]

I think he was just using -moz as an example.

It’s understood that we would target respective browsers using the correct prefix.

…and who gives a flying ‘fig’ about IE? LOL

[Paulie_D]

You mean like this?

http://codepen.io/Paulie-D/pen/eutpK

[Paulie_D]

As for why your previous version failed, I am having no luck.

It could be a specificity issue but I can’t get it to function ‘as expected’ regardless of how detailed I get.

[wolfcry911]

it fails because it’s not the last child

[Paulie_D]

@wolfcry911… yeah, we’re past that and on to why last-of-type isn’t working here.

http://codepen.io/alexmccabe/pen/Esurd

[wolfcry911]

well the pen he links to asking why it still fails uses last-child

last-of-type is going to fail as well, because type refers to the element (not a specific classed element).

[Paulie_D]

>last-of-type is going to fail as well, because type refers to the element (not a specific classed element).

Boom…and there’s the answer we were looking for. :)

[Author]

Posts