There is a list of li elements,

<ul class="portfolio-slider"> <li> <a class="portfolio-item"></a> <a href="" class="portfolio-item"> </a> </li> <li> <a class="portfolio-item"></a> <a href="" class="portfolio-item"> </a> </li> ... </ul>

through jQuery, you need to add your own css properties to each first, others to each second, and third to each third.

 $('.portfolio-slider li:nth-child(1n)').find('a').first().css({ 'top': '-300px', 'left': '-300px' }); $('.portfolio-slider li:nth-child(1n)').find('a').eq(1).css({ 'top': '300px', 'left': '-300px' }); $('.portfolio-slider li:nth-child(2n)').find('a').first().css({ 'top': '-300px' }); $('.portfolio-slider li:nth-child(2n)').find('a').eq(1).css({ 'top': '300px' }); $('.portfolio-slider li:nth-child(3n)').find('a').first().css({ 'top': '-300px', 'right': '-300px' }); $('.portfolio-slider li:nth-child(3n)').find('a').eq(1).css({ 'top': '300px', 'right': '-300px' });

but only properties are added to the first, second, and third elements of li, and not to every first, second, and third element.
http://jsfiddle.net/7PS7s/1/
How to make it work as needed?

    1 answer 1

     :nth-child(3n-2) // Каждый первый :nth-child(3n-1) // Каждый второй :nth-child(3n) // Каждый третий