CODEWITHSUNDEEP
jquerycsscss-selectors
Prastow
Prastow

Reputation: 178

Apply CSS style to every 8th element in the container

I have div's with each an id (0, 1, 2, 3 etc.) and they all have a width of 200 px, however I want to assign a width of 500px to the div that comes after 8 div's, so div 8, div 16, div 24 etc.

Is this possible with css only or should I use a combination of jquery (each)?

This is what I have now:

div.blogbloglayout .items-row.row-0 .voucher, 
div.blogbloglayout .items-row.row-8 .voucher {
    height:500px;
}

But this should be done automatically, not like I did above. Couldn't find an answer related to this.

Upvotes: 2

Views: 444

Answers (1)

George
George

Reputation: 36784

You can use nth-child().

I should point out that applying the style to the first item in the container wouldn't follow your pattern. You could add div.blogbloglayout .items-row:first-child .voucher to the selector though.

div.blogbloglayout .items-row .voucher {
    background:#F66;
    width:200px;
}

div.blogbloglayout .items-row:nth-child(8n) .voucher {
    width:500px;
}
<div class='blogbloglayout'>
    <div class='items-row'><div class='voucher'>Voucher</div></div>
    <div class='items-row'><div class='voucher'>Voucher</div></div>
    <div class='items-row'><div class='voucher'>Voucher</div></div>
    <div class='items-row'><div class='voucher'>Voucher</div></div>
    <div class='items-row'><div class='voucher'>Voucher</div></div>
    <div class='items-row'><div class='voucher'>Voucher</div></div>
    <div class='items-row'><div class='voucher'>Voucher</div></div>
    <div class='items-row'><div class='voucher'>Voucher</div></div>
    <div class='items-row'><div class='voucher'>Voucher</div></div>
    <div class='items-row'><div class='voucher'>Voucher</div></div>
    <div class='items-row'><div class='voucher'>Voucher</div></div>
    <div class='items-row'><div class='voucher'>Voucher</div></div>
    <div class='items-row'><div class='voucher'>Voucher</div></div>
    <div class='items-row'><div class='voucher'>Voucher</div></div>
    <div class='items-row'><div class='voucher'>Voucher</div></div>
    <div class='items-row'><div class='voucher'>Voucher</div></div>
    <div class='items-row'><div class='voucher'>Voucher</div></div>
    <div class='items-row'><div class='voucher'>Voucher</div></div>
    <div class='items-row'><div class='voucher'>Voucher</div></div>
    <div class='items-row'><div class='voucher'>Voucher</div></div>
</div>

Upvotes: 9

Related Questions