Is there a way to target the first and fourth div elements using the :nth-child selector for styling purposes?
.main{
width:460px;
height:240px;
}
.box{
width:100px;
height:100px;
background:red;
float:left;
margin:10px;
}
/*I tried */
.box:nth-child(n+4),.box:first-child{
margin:10px 10px 10px 0;
}
.box:nth-child(4n){
margin:10px 0px 10px 10px;
}<div class="main">
<div class="box"></div> <!-- margin-left:0px -->
<div class="box"></div>
<div class="box"></div>
<div class="box"></div> <!-- margin-right:0px -->
<div class="box"></div> <!-- margin-left:0px -->
<div class="box"></div>
<div class="box"></div>
<div class="box"></div> <!-- margin-right:0px -->
</div>The second code seems to be working fine, however I am encountering difficulties with the first one.
How can I style every first and last div within each row, where each row consists of four divs?