Using the last-child selector

Question

My goal is to apply the CSS on the last li  but it doesn t do that    x000D   x000D   refundReasonMenu  nav li last-child   x000D      border-bottom  1px solid  b5b5b5  x000D    x000D   lt div id  refundReasonMenu  gt  x000D        lt ul id  nav  gt  x000D         lt li gt  lt a id  abc  href     gt abcde lt  a gt  lt  li gt  x000D         lt li gt  lt a id  def  href     gt xyz lt  a gt  lt  li gt  x000D        lt  ul gt  x000D       lt  div gt  x000D   x000D   x000D    How can I select only the last child

User · Answer

Another solution that might work for you is to reverse the relationship. So you would set the border for all list items. You would then use first-child to eliminate the border for the first item. The first-child is statically supported in all browsers (meaning it can't be added dynamically through other code, but first-child is a CSS2 selector, whereas last-child was added in the CSS3 specification)

Note: This only works the way you intended if you only have 2 items in the list like your example. Any 3rd item and on will have borders applied to them.

User · Answer

If you think you can use Javascript  then since jQuery support last-child  you can use jQuery s css method and the good thing it will support almost all the browsers  Example Code     function           nav li last-child   css  border-bottom   1px solid  b5b5b5        You can find more info about here   http   api jquery com css  css2

User · Answer

If the number of list items is fixed you can use the adjacent selector  e g  if you only have three  lt li gt  elements  you can select the last  lt li gt  with    nav li li li       border-bottom  1px solid  b5b5b5

User · Answer

Why not apply the border to the bottom of the UL    refundReasonMenu  nav ul       border-bottom  1px solid  b5b5b5

User · Answer

If you find yourself frequently wanting CSS3 selectors  you can always use the selectivizr library on your site   http   selectivizr com   It s a JS script that adds support for almost all of the CSS3 selectors to browsers that wouldn t otherwise support them   Throw it into your  lt head gt  tag with an IE conditional    lt  -- if  gte IE 6  amp  lte IE 8   gt     lt script src   js selectivizr-min js  type  text javascript  gt  lt  script gt   lt   endif -- gt

User · Answer

If you are floating the elements you can reverse the order  i e  float  right  instead of float  left   And then use this method to select the first-child of a class      1  Apply style to ALL instances     header  some-class     padding-right  0       2  Remove style from ALL instances except FIRST instance     header  some-class  some-class     padding-right  20px      This is actually applying the class to the LAST instance only because it s now in reversed order   Here is a working example for you    lt  doctype html gt   lt head gt  lt title gt CSS Test lt  title gt   lt style type  text css  gt   some-class   margin  0  padding  0 20px  list-style-type  square     lfloat   float  left  display  block     rfloat   float  right  display  block       apply style to last instance only     header  some-class     border  1px solid red    padding-right  0     header  some-class  some-class     border  0    padding-right  20px     lt  style gt   lt  head gt   lt body gt   lt div id  header  gt     lt img src  some image  title  Logo  class  lfloat no-border   gt     lt ul class  some-class rfloat  gt       lt li gt List 1-1 lt  li gt       lt li gt List 1-2 lt  li gt       lt li gt List 1-3 lt  li gt     lt  ul gt     lt ul class  some-class rfloat  gt       lt li gt List 2-1 lt  li gt       lt li gt List 2-2 lt  li gt       lt li gt List 2-3 lt  li gt     lt  ul gt     lt ul class  some-class rfloat  gt       lt li gt List 3-1 lt  li gt       lt li gt List 3-2 lt  li gt       lt li gt List 3-3 lt  li gt     lt  ul gt     lt img src  some other img  title  Icon  class  rfloat no-border   gt   lt  div gt   lt  body gt   lt  html gt

User · Answer

last-child pseudo class does not work in IE  CSS Compatibility and Internet Explorer  IE7 CSS Selectors  How they fail

User · Answer

As an alternative to using a class you could use a detailed list  setting the child dt elements to have one style and the child dd elements to have another  Your example would become    refundReasonMenu  nav li dd     border-bottom  1px solid  b5b5b5      html    lt div id  refundReasonMenu  gt     lt dl id  nav  gt           lt dt gt  lt a id  abc  href     gt abcde lt  a gt  lt  dt gt           lt dd gt  lt a id  def  href     gt xyz lt  a gt  lt  dd gt     lt  dl gt   lt  div gt    Neither method is better than the other and it is just down to personal preference

User · Answer

Another way to do it is using the last-child selector in jQuery and then use the  css   method   Be weary though because some people are still in the stone age using JavaScript disabled browsers

User · Answer

The  last-child pseudoclass still cannot be reliably used across browsers   In particular  Internet Explorer versions  lt  9  and Safari  lt  3 2 definitely don t support it  although Internet Explorer 7 and Safari 3 2  do support  first-child  curiously   Your best bet is to explicitly add a last-child  or similar  class to that item  and apply li last-child instead

User · Answer

It s hard to say without seeing the rest of your CSS  but try adding  important in front of the border color  to make it like so    refundReasonMenu  nav li last-child     border-bottom  1px solid  b5b5b5  important

[css] Using the last-child selector

Examples related to css

Examples related to css-selectors