Substitute :last-child for :first-child for IE 7 support

Consider the following:

ul li {
   display: inline;
   margin-right: 10px;
   padding-right: 10px;
   border-right: 1px solid red;
}

ul li:last-child {
   margin-right: 0;
   padding-right: 0;
   border-right: 0;
}

This bit of CSS would give you perfect line separators in IE8+. But since IE 7 supports the :first-child pseudo-class, we can do one better:

ul li {
   display: inline;
   margin-left: 10px;
   padding-left: 10px;
   border-left: 1px solid red;
}

ul li:first-child {
   margin-left: 0;
   padding-left: 0;
   border-left: 0;
}

Same* result, with more browser support.
*Substitute for “sane”.

del.icio.us:Substitute :last-child for :first-child for IE 7 supportdigg:Substitute :last-child for :first-child for IE 7 support

3 Comments

  1. Goetter
    November 21, 2010
    3:00 pm
     

    You could even do it in one line :

    ul li + li {
    margin-left: 10px;
    padding-left: 10px;
    border-left: 1px solid red;
    }

    The power of CSS2.1 adjacent selector supported by IE7
    ;)

  2. Obliltheigilt
    May 5, 2011
    11:29 am
     

    ??????? ??????????? ??????????? ????? ????????? ???? ?????????? ???????????

    ??????????? 1500? ?????? ??????????? ?????? ???????? ??????? ??????????? ?????? ????????

  3. kevin mata
    December 28, 2011
    10:57 pm
     

    Awesome tip is awesome.

Post a Comment

Your email is never published nor shared. Required fields are marked *
*
*