html - Select specific divs with an nth selector?

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"><a href="">Range 1</a></div>
  <div class="tra-ra-box" id="ra2"><a href="">Range 2</a></div>
  <div class="tra-ra-box" id="ra3"><a href="">Range 3</a></div>
  <div class="tra-ra-box" id="ra4"><a href="">Range 4</a></div>
  <div class="tra-ra-box" id="ra5"><a href="">Range 5</a></div>
  <div class="tra-ra-box" id="ra6"><a href="">Range 6</a></div>
  <div class="tra-ra-box" id="ra7"><a href="">Range 7</a></div>
  <div class="tra-ra-box" id="ra8"><a href="">Range 8</a></div>
  <div class="tra-ra-box" id="ra9"><a href="">Range 9</a></div>
  <div class="tra-ra-box" id="ra10"><a href="">Range 10</a></div>
  <div class="tra-ra-box" id="ra11"><a href="">Range 11</a></div>
  <div class="tra-ra-box" id="ra12"><a href="">Range 12</a></div>
</div>

I need to apply margins to these IDs: ra2, ra3, ra6, ra7, ra10 and ra11

标签： htmlcss

Answer 1

您可以使用 nth-child 4n+2（ra2、ra6 和 ra10）和4n+3（ra3、ra7 和 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"><a href="">Range 1</a></div>
  <div class="tra-ra-box" id="ra2"><a href="">Range 2</a></div>
  <div class="tra-ra-box" id="ra3"><a href="">Range 3</a></div>
  <div class="tra-ra-box" id="ra4"><a href="">Range 4</a></div>
  <div class="tra-ra-box" id="ra5"><a href="">Range 5</a></div>
  <div class="tra-ra-box" id="ra6"><a href="">Range 6</a></div>
  <div class="tra-ra-box" id="ra7"><a href="">Range 7</a></div>
  <div class="tra-ra-box" id="ra8"><a href="">Range 8</a></div>
  <div class="tra-ra-box" id="ra9"><a href="">Range 9</a></div>
  <div class="tra-ra-box" id="ra10"><a href="">Range 10</a></div>
  <div class="tra-ra-box" id="ra11"><a href="">Range 11</a></div>
  <div class="tra-ra-box" id="ra12"><a href="">Range 12</a></div>
</div>