CODEWITHSUNDEEP
csshtmlbehaviorcss-selectors
Kim Kakan Andersson
Kim Kakan Andersson

Reputation: 647

Change specific div, nth-child?

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

Answers (2)

Naheed Shareef
Naheed Shareef

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

Sheixt
Sheixt

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

Related Questions