Question

I have a 12 box in html.

i want to make three block and every block have 4 box then i can show them in the design i have.

first thing is that

in every block not first but 2nd , third or fourth block have class ‘box2’ [not apply to first of all three block].

all 3 box code goes something like

<div class="block>
<div class="box"></div>
<div class="box box2"></div>
<div class="box box2"></div>
<div class="box box2"></div>
</div>

i have the same iteration beause code render by c# and they render 12 box who not have box2 class on 2nd , third and on 4 box.

i need to do that:

wrap in block div all 4 elements because it is 12 then it’s make three block and every block have 4 element.

Answer 1

You can achieve this is CSS using the nth-child selectors.

For example, use the following:

CSS:

.clear{
    clear:both;
    padding:0;
    margin:0;
}

.block{
        background-color:#999;
        width:500px;
        padding:10px 10px 0 10px;
    }

    .box{
        width:100px;
        height:100px;
        margin:0 10px 10px 0;
        background-color:#ccc;
        float:left;
        border:2px solid #000;
    }

    .box:nth-child(4n+1){
        border:2px solid #900;
    }

HTML

<div class="block">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="clear"></div>
</div>

The nth-child selector is only applying the style to every forth box starting from the first one. So basically, you would assign the style of box2 and box (combined into one class) to all DIV’s and then using the nth-child selector, apply the style of your choice for the boxes 1, 5 , and 9.

I hope this helps,
Dan