CSS not last-child after selector

Question

I have a list of elements  which are styled like this    x000D   x000D  ul   x000D      list-style-type  none  x000D      text-align  center  x000D    x000D   x000D  li   x000D      display  inline  x000D    x000D   x000D  li not  last-child  after   x000D      content       x000D    x000D   lt ul gt  x000D       lt li gt One lt  li gt  x000D       lt li gt Two lt  li gt  x000D       lt li gt Three lt  li gt  x000D       lt li gt Four lt  li gt  x000D       lt li gt Five lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    Outputs One   Two   Three   Four   Five   instead of One   Two   Three   Four   Five  Anyone know how to CSS select all but the last element   You can see the definition of the  not   selector here

User · Answer

Your example as written works perfectly in Chrome 11 for me. Perhaps your browser just doesn't support the :not() selector?

You may need to use JavaScript or similar to accomplish this cross-browser. jQuery implements :not() in its selector API.

User · Answer

Remove the   before last-child and the  after and used   ul li not last-child    content           Hopefully it should work

User · Answer

If it s a problem with the not selector  you can set all of them and override the last one  li after     content          li last-child after     content          or if you can use before  no need for last-child  li li before     content

User · Answer

Your sample does not work in IE for me  you have to specify Doctype header in your document to render your page in standard way in IE to use the content CSS property    lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 01 Transitional  EN   http   www w3 org TR html4 loose dtd  gt   lt head gt   lt link href  style css  rel  stylesheet  type  text css  gt   lt  head gt   lt html gt    lt ul gt       lt li gt One lt  li gt       lt li gt Two lt  li gt       lt li gt Three lt  li gt       lt li gt Four lt  li gt       lt li gt Five lt  li gt   lt  ul gt    lt  html gt    Second way is to use CSS 3 selectors  li not  last-of-type  after       content                      But you still need to specify Doctype  And third way is to use JQuery with some script like following    lt script type  text javascript  src  jquery-1 4 1 js  gt  lt  script gt   lt link href  style2 css  rel  stylesheet  type  text css  gt   lt  head gt   lt html gt    lt ul gt       lt li gt One lt  li gt       lt li gt Two lt  li gt       lt li gt Three lt  li gt       lt li gt Four lt  li gt       lt li gt Five lt  li gt   lt  ul gt    lt script type  text javascript  gt      document  ready function               li not  last    append                  lt  script gt    Advantage of third way is that you dont have to specify doctype and jQuery will take care of compatibility

User · Answer

You can try this  I know is not the answers you are looking for but the concept is the same   Where you are setting the styles for all the children and then removing it from the last child   Code Snippet  li   margin-right  10px     amp  last-child     margin-right  0   Image

User · Answer

An example using CSS    ul li not  last-child           border-right  1px solid rgba 153  151  151  0 75

User · Answer

For me it work fine   amp  not  last-child               text-transform  uppercase

User · Answer

Every things seems correct  You might want to use the following css selector instead of what you used   ul  gt  li not  last-child  after

[css] CSS :not(:last-child):after selector

Examples related to css

Examples related to css-selectors

Examples related to pseudo-element