Select specific divs with an nth selector? - html

Question

I have 12 divs tied to the same class but with different IDs and I want to apply a margin to specific ones, is this possible with a nth selector?
I have a rough example below (I'm using a sprite sheet in my actual project, so all the ra IDs have a background position set along with a width and height).
.tra-ra-cont {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.tra-ra-box {
line-height: 210px;
text-align: center;
margin: 3px;
}
.tra-ra-box a {
height: 210px;
width: 270px;
display: block;
font-size: 18px;
text-decoration: none;
color: black;
}
#ra1,
#ra2,
#ra3,
#ra4,
#ra5,
#ra6,
#ra7,
#ra8,
#ra9,
#ra10,
#ra11,
#ra12 {
background-repeat: no-repeat;
background-color: lightblue;
width: 270px;
height: 210px;
}
<div class="tra-ra-cont">
<div class="tra-ra-box" id="ra1">Range 1</div>
<div class="tra-ra-box" id="ra2">Range 2</div>
<div class="tra-ra-box" id="ra3">Range 3</div>
<div class="tra-ra-box" id="ra4">Range 4</div>
<div class="tra-ra-box" id="ra5">Range 5</div>
<div class="tra-ra-box" id="ra6">Range 6</div>
<div class="tra-ra-box" id="ra7">Range 7</div>
<div class="tra-ra-box" id="ra8">Range 8</div>
<div class="tra-ra-box" id="ra9">Range 9</div>
<div class="tra-ra-box" id="ra10">Range 10</div>
<div class="tra-ra-box" id="ra11">Range 11</div>
<div class="tra-ra-box" id="ra12">Range 12</div>
</div>
I need to apply margins to these IDs: ra2, ra3, ra6, ra7, ra10 and ra11

Answer 1

You can use nth-child 4n+2 (ra2, ra6 and ra10) and 4n+3 (ra3, ra7 and ra11):
.tra-ra-cont {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.tra-ra-box {
line-height: 210px;
text-align: center;
margin: 3px;
}
.tra-ra-box a {
height: 210px;
width: 270px;
display: block;
font-size: 18px;
text-decoration: none;
color: black;
}
.tra-ra-box {
background-repeat: no-repeat;
background-color: lightblue;
width: 270px;
height: 210px;
}
.tra-ra-cont > div:nth-child(4n + 2),
.tra-ra-cont > div:nth-child(4n + 3) {
background-color:red;
}
<div class="tra-ra-cont">
<div class="tra-ra-box" id="ra1">Range 1</div>
<div class="tra-ra-box" id="ra2">Range 2</div>
<div class="tra-ra-box" id="ra3">Range 3</div>
<div class="tra-ra-box" id="ra4">Range 4</div>
<div class="tra-ra-box" id="ra5">Range 5</div>
<div class="tra-ra-box" id="ra6">Range 6</div>
<div class="tra-ra-box" id="ra7">Range 7</div>
<div class="tra-ra-box" id="ra8">Range 8</div>
<div class="tra-ra-box" id="ra9">Range 9</div>
<div class="tra-ra-box" id="ra10">Range 10</div>
<div class="tra-ra-box" id="ra11">Range 11</div>
<div class="tra-ra-box" id="ra12">Range 12</div>
</div>