Changing CSS for last li

Question

I am wondering if there is some way to change a CSS attribute for the last li in a list using CSS   I have looked into using  last-child  but this seems really buggy and I can t get it to work for me   I will use JavaScript to do this if necessary  but I want to know if anyone can think up a solution in CSS

User · Answer

last-child is CSS3 and has no IE support while  first-child is CSS2  I believe the following is the safe way to implement it using jquery     li   last   addClass  someClass

User · Answer

2015 Answer  CSS last-of-type allows you to style the last item   ul li last-of-type   color  red

User · Answer

li   last   addClass  someClass     if you have multiple  group it will only select the last li

User · Answer

I ve done this with pure CSS  probably because I come from the future - 3 years later than everyone else  P    Supposing we have a list    lt ul id  nav  gt     lt li gt  lt span gt Category 1 lt  span gt  lt  li gt     lt li gt  lt span gt Category 2 lt  span gt  lt  li gt     lt li gt  lt span gt Category 3 lt  span gt  lt  li gt   lt  ul gt    Then we can easily make the text of the last item red with   ul nav li last-child span      color  Red

User · Answer

If you know there are three li s in the list you re looking at  for example  you could do this   li   li   li      Selects third to last li        In IE6 you can use expressions   li       color  expression this previousSibling    red     green        green  if last child        I would recommend using a specialized class or Javascript  not IE6 expressions   though  until the  last-child selector gets better support

User · Answer

You could use jQuery and do it as such way     li last-child   addClass  someClass

User · Answer

I usually combine CSS and JavaScript approaches  so that it works without JavaScript in all browsers but IE6 7  and in IE6 7 with JavaScript on  but not off   since they does not support the  last-child pseudo-class      li last-child   addClass  last-child     li last-child li last-child

User · Answer

One alternative for IE7  and other browsers may be to use  first-child instead  and invert your styles   For example  if you re setting the margin on each li   ul li     margin-bottom  1em    ul li last-child     margin-bottom  0      You could replace it with this   ul li     margin-top  1em    ul li first-child     margin-top  0      This will work well for some other cases like borders   According to sitepoint   first-child buggy  but only to the extent that it will select some root elements  the doctype or html   and may not change styles if other elements are inserted

User · Answer

last-child is really the only way to do it without modifying the HTML - but assuming you can do that  the main option is just to give it a class  last-item   then do   li last-item                 Obviously  you can automate this in the dynamic page generation language of your choice  Also  there is a lastChild JavaScript property in the W3C DOM   Here s an example of doing what you want in Prototype       ul   each function x      x lastChild  addClassName  last-item          Or even more simply       ul li last-child   each function x    x addClassName  last-item          In jQuery  you can write it even more compactly      ul li last-child   addClass  last-item      Also note that this should work without using the actual last-child CSS selector - rather  a JavaScript implementation of it is used - so it should be less buggy and more reliable across browsers

User · Answer

I usually do this by creating a htc file  ex  last-child htc     lt attach event  ondocumentready  handler  initializeBehaviours    gt   lt script type  text javascript  gt  function initializeBehaviours       this lastChild className      last-child      lt  script gt    And call it from my IE conditional css file with    ul   behavior  url   javascripts htc last-child htc       Whereas in my main css file I got   ul li last-child  ul li last-child        some code        Another solution  albeit slower  that uses your existent css markup without defining any  last-child class would be Dean Edwards ie7 js library

[html] Changing CSS for last <li>

Examples related to html

Examples related to css

Examples related to css-selectors

Examples related to html-lists