jquery - Css selector does not work as I expected -

i've done search/google didn't lead anywhere. problem, have following html structure (just sample, list's length dynamic):

<ul class="collection">     <a class="collection-item head">alvin</li>     <a href="#" class="collection-item">alvin</a>     <a href="#" class="collection-item">alvin</a>     <a href="#" class="collection-item">alvin</a>     <a class="collection-item head">alvin</li>     <a href="#" class="collection-item">alvin</a>     <a href="#" class="collection-item">alvin</a>     <a href="#" class="collection-item">alvin</a>     <a class="collection-item head">alvin</li>     <a href="#" class="collection-item">alvin</a>     <a href="#" class="collection-item">alvin</a>     <a href="#" class="collection-item">alvin</a> </ul> 

i want css them this: http://i.imgur.com/iip6vxt.png

i use css selector .head class change border color of them:

.collection .head:nth-child(1){     border-left: 5px solid green; } .collection .head:nth-child(2){     border-left: 5px solid orange; } .collection .head:nth-child(3){     border-left: 5px solid blue; } 

it worked on first child of .collection 2nd , 3th 1 didn't change. found css selector count of .collection's child not .head class.

so i'm stuck right there. know situation?

i have answer saqib amin can't make work. make version of full jquery. hope useful uguys.

$('.head').each(function(index) {     switch (index) {         case 0:             $(this).css({                 property1: 'value1',                 property2: 'value2'             });             break;         case 1:             $(this).css({                 property1: 'value1',                 property2: 'value2'             });             break;         case 2:             $(this).css({                 property1: 'value1',                 property2: 'value2'             });             break;     } }); 

you providing wrong values nth-child selector, css should this:

.collection .head:nth-child(1){     border-left: 5px solid green; } .collection .head:nth-child(5){     border-left: 5px solid orange; } .collection .head:nth-child(9){     border-left: 5px solid blue; } 

to learn more how nth-child selector works visit: https://developer.mozilla.org/en/docs/web/css/:nth-child

as said number of items can vary should use different solution, suggest using jquery add indexing numbers each of .head element , style elements using indexing.

your jquery code be:

var counter = 1; $('.head').each(function() {     $(this).attr('data-index', counter++); }); 

and css like:

.collection .head[data-index=1] {     border-left: 5px solid green; } .collection .head[data-index=2] {     border-left: 5px solid orange; } .collection .head:[data-index=3] {     border-left: 5px solid blue; }