Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using nth-child to make a chess pattern

I am breaking my head to achieve something quite relatively simple here.

I need to select every 3rd and 4th element on my page, how could I do that using css :nth-child()?

JS answers also welcome.

Thanks a lot.

***EDIT

Apologies guys my question was badly written. I attached an example below of what I need.

This is the outcome I need, http://jsfiddle.net/8FXL6/

        <li></li>
        <li class="highlight"></li>
        <li class="highlight"></li>
        <li></li>
        <li></li>
        etc

Without hardcoding the class names.

like image 895
peduarte Avatar asked Dec 04 '22 01:12

peduarte


2 Answers

*:nth-child(3),*:nth-child(4){
}

Technically, this selects every element that is the 3rd or 4th child in its container. If you want to select every 3rd or 4th element (3,4,6,8 etc.), use:

*:nth-child(3n),*:nth-child(4n){
}

DEMO

From your edit, you need:

li:nth-child(4n-2),li:nth-child(4n-1){
}

DEMO

like image 68
Asad Saeeduddin Avatar answered Dec 08 '22 00:12

Asad Saeeduddin


You can use comma to combine selectors using nth-child to get elements,

Live Demo

elements = $('div .className :nth-child(3), div .className :nth-child(4)');
like image 29
Adil Avatar answered Dec 07 '22 23:12

Adil