Normally I don't have any issues with CSS, however this one has me completely stumped!
If you take a look at 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.
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.
Normally I don't have any issues with CSS, however this one has me completely stumped!
If you take a look at 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.
Hi @alexmccabe
You can use this;
like so - http://codepen.io/anon/pen/lIxqD
You're using the the wrong pseudo class
EDIT...Aw, SNAP
Browser support ain't great though.
Hmm yeah that works. Thank you.
But why doesn't the last-child work. It should, and I've not ever had an issue with it before.
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.
Because each item is not a child of anything.
EDIT: FFS....SNAP again.
OK....here's something...why create a div with that class instead of just styling your 'hr' tag?
CSS Tricks does.
See:
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)
I tried adding a gradient to an actual hr but it was having none of it. Now I realise I forgot to clear the border. Makes more sense.
Why is this still not working then?
More of a curiosity now than anything.
Shouldn't your css be as simple as;
just like Chris uses...
Watson90, if I only used -moz- then only firefox would have a gradient. The big svg is for IE9.
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
unfortunately I have to =[
I will switch to <hr> tags, but if you could explain why this still doesn't work, that would be much appreciated. it still fails
If you remove that <div class="push"> it works
You mean like this?
http://codepen.io/Paulie-D/pen/eutpK
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.
it fails because it's not the last child
@wolfcry911... yeah, we're past that and on to why last-of-type isn't working here.
http://codepen.io/alexmccabe/pen/Esurd
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).
Boom...and there's the answer we were looking for. :)
Right, I thought that might be the case. I have switched to <hr> tags now, and I am using last-of-type. So it works.
What (if anything) can be done in the future to combat this, if I wish to target <div> tags?
I have to say that, until CSS catches up we're locked into using an extra class on the 'last' div.
...or we get creative in how we mark up our pages.