Reputation: 647
I have a problem here. I have this div
that's mentioned 4 times in my code, like:
<div class='box1'>
Hello 1
</div>
<div class='box1'>
Hello 2
</div>
<div class='box1'>
Hello 3
</div>
<div class='box1'>
Hello 4
</div>
and I want to do some changes to this div
class, but only the last one. I cant get the nth-class to work, it seems that i need to make a ul
table for it to work? Can I get a workaround somewhere in the CSS and make it work without having to rewrite my code?
Upvotes: 5
Views: 26618
Reputation: 1131
Sorry for answering a bit late.
To make any changes to the Last-DIV, You just need to simply add a selector i.e, :last-of-type a change in the CSS.
Add-on: If it's for First-DIV, Add a selector i.e, first-of-type
HTML:
<div class="box1">
Hello 1
</div>
<div class="box1">
Hello 2
</div>
<div class="box1">
Hello 3
</div>
<div class="box1">
Hello 4
</div>
CSS:
div.box1:first-of-type {
color: #fff;
background-color: green;
}
div.box1:last-of-type {
color: #fff;
background-color: blue;
}
Editor: https://jsfiddle.net/naheedshareef/09dwtfpu/8/
Upvotes: 0
Reputation: 2626
You should be able to do this with the nth-child
pseudo class. Take a look at this demo: http://jsfiddle.net/m7uW7/2/
Upvotes: 5