Question

I need an if/else statement for my CSS which can count list items. Would this be possible?

Basically I want to say, if there are less than 10 list items, the UL container should be 200px wide, and it there are more than 10 list items, it should be 400px wide. Something like that.

Can it be done?

I would appreciate a working demo on jsFiddle, both so I can see working code, and for anyone who looks here in the future so they can see a working example and how to do it 🙂

Answer 1

CSS only does styles, but not dynamically (unless with assistance of JS). you can use the following JS snippet for the task. just to make sure, load this at the very last, just before the </body>

<script type="text/javascript">

(function resize() { 

    //get all lists with selected name
    var lists = document.getElementsByClassName('myList');

    //loop through all gathered lists
    for (i = 0; i < lists.length; i++) {

        //shorthand elements for easy use
        var list = lists[i];
        var items = list.getElementsByTagName('li');

        //append class names
        list.className = (items.length < 10) ? 'myList less' : 'myList more';
    }
}())​

</script>

.less{
    width:200px;
}
.more{
    width:400px;
}​