0

I have a list of the following format, how can I add style to the first 2 list elements using CSS (should work in IE8):

<ul id="list1"  style="margin-left:-20%;font-weight:bold" >
   <li class="xyz"> Element1 </li>
   <li class="xyz"> Element2 </li>
   <li class="xyz"> Element3 </li>
</ul>
1
  • 2
    You'll need nth-child with a JavaScript fallback for ie 8. Oct 22, 2012 at 9:42

6 Answers 6

1

Try this way

 #list1 li:first-child
{

//styles//
}
#list1 li:first-child+li
{
  //styles//

}
0
1

you can use nth-child pseudo class, but it won't work on IE8 and earlier. instead, i would style every element like you want to style firtst two

ul li {
color: red;
}

and then style last one differently, like this:

ul li + li + li {
color: blue;
}

this should work on older IE as well.

1

Try this code in your css

    ul li:first-child {
        //style
    }
    /* equivalent to li:nth-child(2) */
    ul li:first-child + li {
        //style
    }

This is an example in jsfiddle with another code but works in IE8 downvote is inappropriate in this case:

JSFIDDLE

1
  • 2
    What? IE8 supports first-child, it does not support last-child.
    – Hcabnettek
    Nov 11, 2013 at 20:27
0

For this issue you use this code in head tag then set 1 class to element 2

<!--[if IE 8]>
  <style>
     .Element2{
        Your Style
     }
  </style>
<![endif]-->

this code only work in IE8

0

You can add it easily by using following selector and it works in IE8 also

#list1 li:first-child, #list1 li:nth-child(2){ border:1px solid red; }

-4
$("li:lt(2)").css("color", "red");

Using the JQuery selector :lt() (less than) will target the first 2 li's.

Read up on it here - http://api.jquery.com/lt-selector/

1
  • the OP said he was looking for a CSS solution
    – BiAiB
    Oct 22, 2012 at 9:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.