0

I'm trying to select a element with css and I can't use css3 because this is for a older system, so I can't use. 

nth-last-child(2)

is there a way to do this in css

Michael Durrant
  • 93,410
  • 97
  • 333
  • 497
Wanting to learn
  • 468
  • 1
  • 7
  • 25

2 Answers2

2

You can add a class using jQuery like such:

// #css3 and .query can be any css3 selector
$("#css3 .query:nth-last-child(2)").addClass("lasties2")

And then define the class (lasties2) in your css. If you can't use JavaScript or are using a different library, or don't want to use a library, then please specify. Other libraries like mootools and prototype will have ways to achieve the same end. You will have greater difficulty with pure JavaScript in an environment that does not support CSS3, but it is possible. If you can't or don't want to use JavaScript then you will have to add a class to the relevant items manually.

One caveat of the javascript and the manual approach is that if the page is modified by javascript, the behavior won't match css3. With CSS3 if the nth from last child changes, it then the new one will get styled, with jquery or manual classing it will stick to the initial one. Here is a jsfiddle that illustrates what i mean: http://jsfiddle.net/CSExB/35/

As you can see if you tried the fiddle, it is possible to fix this with javascript by first removing the class, then making the modification and finally reapplying the class, for the above code for example it would be:

$("#css3 .query:nth-last-child(2)").removeClass("lasties2");
$("#css3").append('<p class="query">something</p>');
$("#css3 .query:nth-last-child(2)").addClass("lasties2");
kaan_a
  • 3,503
  • 1
  • 28
  • 52
0

If you want make page compatible with IE < 9 or Safari < 3.2 you should add additional class to list items <li class="some_additional_class">. You can do it when page generated on server-side, or using JS on client-side.

user2443795
  • 144
  • 7