CODEWITHSUNDEEP
css
beans
beans

Reputation: 1765

Targeting li elements?

I have:

<ul>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
</ul>

I want to add a different width to each li.

I don't want to do it inline.

How can I target each li using CSS2 (not CSS3)?

Is there a way or do I need to give each li a class name?

Thanks

Upvotes: 0

Views: 121

Answers (5)

Vipul
Vipul

Reputation: 325

you can also use comb css as you have to add class for each li in CSS e:g- 

li {}
li + li {}
li + li + li {}
li + li + li + li {}
li + li + li + li + li {}

Upvotes: 0

dotty
dotty

Reputation: 41433

Why not use nth-of-type

ul li:nth-of-type(1){} /* First */
ul li:nth-of-type(2){} /* Seconds */

and if you're worried about older browsers, there's a great library that adds CSS3 pseudo-classes to them.

The only CSS2 way would be to add classes to each LI.

EDIT

Actually the different classes per LI isn't the only CSS2 way. @Hashem Qolami comment to the original question has a decent CSS2 solution, but like he says, it looks a little silly.

Upvotes: 1

Ennui
Ennui

Reputation: 10190

If you want to use pure CSS2, you have to give them class names. This could be accomplished with the :nth-of-type() psuedoclass selector but that is a CSS3 feature.

This would be very simple to do with jQuery as well (if you want to avoid relying on CSS3 but don't want to add class names to your markup). This also would have the advantage of allowing you to dynamically change the widths as needed (rather than hard-coding property values as CSS classes).

Upvotes: 0

Prasanna
Prasanna

Reputation: 11544

You can give class names to all your li and set to display block, with float.

Sample fiddle: 

li{
    display:block;
    float:left;
    background:blue;
}
li.small{
        width:50%;
}
li.big{
   width:100%; 
}

Upvotes: 0

Euan T
Euan T

Reputation: 2141

By "each li" do you mean each li element individually? if so, the nth selector might be your friend, though it is CSS3.

Upvotes: 0

Related Questions