0

I am using the nth-child selector to add border-color for different social list-group-item.but I tried nth-child number three not working What am I doing wrong?

.new-class:nth-child(1n) .list-group-item {
  border-right: 3px solid yellow;
}

.new-class:nth-child(2n) .list-group-item {
  border-right: 3px solid red;
}

.new-class:nth-child(3n) .list-group-item {
  border-right: 3px solid green;
}

.new-class:nth-child(4) .list-group-item {
  border-right: 3px solid blue;
}

.new-class:nth-child(5) .list-group-item {
  border-right: 3px solid brown;
}

.new-class:nth-child(6) .list-group-item {
  border-right: 3px solid red;
}
<div class="row">
  <div class="new-class col-xs-12 col-sm-6 col-md-4 col-lg-6">
    <div class="views-field views-field-title">
      <span class="field-content list-group-item"><a href="/content/apple">Apple</a></span>
    </div>
  </div>

  <div class="new-class col-xs-12 col-sm-6 col-md-4 col-lg-6">
    <div class="views-field views-field-title">
      <span class="field-content list-group-item"><a href="/content/microsoft">Microsoft</a></span>
    </div>
  </div>

  <div class="clearfix visible-sm-block"></div>
  <div class="clearfix visible-lg-block"></div>
  <div class="new-class col-xs-12 col-sm-6 col-md-4 col-lg-6">
    <div class="views-field views-field-title">
      <span class="field-content list-group-item"><a href="/content/yahoo">Yahoo</a></span>
    </div>
  </div>

  <div class="clearfix visible-md-block"></div>
  <div class="new-class col-xs-12 col-sm-6 col-md-4 col-lg-6">
    <div class="views-field views-field-title">
      <span class="field-content list-group-item"><a href="/content/google">Google</a></span>
    </div>
  </div>

  <div class="clearfix visible-sm-block"></div>
  <div class="clearfix visible-lg-block"></div>
</div>
fen1x
  • 5,616
  • 6
  • 28
  • 39
  • I really advice you to read carefully the duplicate question (the same as your previous answer) as you will understand how these selector works and you will find some work around like using JS if you cannot change yout HTML – Temani Afif Jun 30 '18 at 19:23

1 Answers1

0

First of all - you confuse nth-child with nth-of-type:

  • nth-child matches elements based on their position in a group of siblings
  • nth-of-type matches elements of a given type, based on their position among a group of siblings

As of now there's no nth-of-class selector, so both nth-child and nth-of-type will not work as you expect with your layout.

There's a workaround, however: give every .clearfix element another type, p in example below:

.new-class:nth-of-type(1n) .list-group-item {
  border-right: 3px solid yellow;
}

.new-class:nth-of-type(2n) .list-group-item {
  border-right: 3px solid red;
}

.new-class:nth-of-type(3n) .list-group-item {
  border-right: 3px solid green;
}

.new-class:nth-of-type(4n) .list-group-item {
  border-right: 3px solid blue;
}

p.clearfix {
  margin: 0;
}
<div class="row">
  <div class="new-class col-xs-12 col-sm-6 col-md-4 col-lg-6">
    <div class="views-field views-field-title">
      <span class="field-content list-group-item"><a href="/content/apple">Apple</a></span>
    </div>
  </div>

  <div class="new-class col-xs-12 col-sm-6 col-md-4 col-lg-6">
    <div class="views-field views-field-title">
      <span class="field-content list-group-item"><a href="/content/microsoft">Microsoft</a></span>
    </div>
  </div>

  <p class="clearfix visible-sm-block"></p>
  <p class="clearfix visible-lg-block"></p>
  <div class="new-class col-xs-12 col-sm-6 col-md-4 col-lg-6">
    <div class="views-field views-field-title">
      <span class="field-content list-group-item"><a href="/content/yahoo">Yahoo</a></span>
    </div>
  </div>

  <p class="clearfix visible-md-block"></p>
  <div class="new-class col-xs-12 col-sm-6 col-md-4 col-lg-6">
    <div class="views-field views-field-title">
      <span class="field-content list-group-item"><a href="/content/google">Google</a></span>
    </div>
  </div>

  <p class="clearfix visible-sm-block"></p>
  <p class="clearfix visible-lg-block"></p>
</div>
fen1x
  • 5,616
  • 6
  • 28
  • 39