css nth-child() of a subclass not Working

Question

I just want to format the "visibility" element differently. It doesn't seem to work with nth-child. Can someone tell me why it doesn't work. Or reveal another solution.

many thanks

.owl-stage div.visibility:nth-child(1){
  background: blue;
}
.owl-stage div.visibility:nth-child(2){
  background: red;
}

<div class="owl-stage">
  <div class="owl-item">The paragraph.</div>
  <div class="owl-item">The paragraph.</div>
  <div class="owl-item">The paragraph.</div>
  <div class="owl-item">The paragraph.</div>
  <div class="owl-item">The paragraph.</div>
  <div class="owl-item">The paragraph.</div>
  <div class="owl-item visibility">The paragraph.</div>
  <div class="owl-item visibility">The paragraph.</div>
  <div class="owl-item visibility">The paragraph.</div>
  <div class="owl-item visibility">The paragraph.</div>
  <div class="owl-item">The paragraph.</div>
  <div class="owl-item">The paragraph.</div>
  <div class="owl-item">The paragraph.</div>
  <div class="owl-item">The paragraph.</div>
  <div class="owl-item">The paragraph.</div>
  <div class="owl-item">The paragraph.</div>
  <div class="test">The paragraph.</div>
</div>

score 2 · Answer 1 · answered Oct 07 '20 at 10:34

2

You need to specify n

.owl-stage div.visibility:nth-child(1n){
 background: blue;
}
.owl-stage div.visibility:nth-child(2n){
 background: red;
}

answered Oct 07 '20 at 10:34

jobayer

156
1
5

score 1 · Accepted Answer · answered Oct 07 '20 at 10:45

nth-child only selects the child count, not the class. So technically the first .visibility is the 7th child. And there's no such thing called nth-class

But you can still achieve that by relative selector +:

/* nth-class(1) */
.owl-stage div:not(.visibility) + .visibility {
  background: blue;
}


/* nth-class(2) */
.owl-stage div:not(.visibility) + .visibility + .visibility {
  background: red;
}

<div class="owl-stage">
  <div class="owl-item">The paragraph.</div>
  <div class="owl-item">The paragraph.</div>
  <div class="owl-item">The paragraph.</div>
  <div class="owl-item">The paragraph.</div>
  <div class="owl-item">The paragraph.</div>
  <div class="owl-item">The paragraph.</div>
  <div class="owl-item visibility">The paragraph.</div>
  <div class="owl-item visibility">The paragraph.</div>
  <div class="owl-item visibility">The paragraph.</div>
  <div class="owl-item visibility">The paragraph.</div>
  <div class="owl-item">The paragraph.</div>
  <div class="owl-item">The paragraph.</div>
  <div class="owl-item">The paragraph.</div>
  <div class="owl-item">The paragraph.</div>
  <div class="owl-item">The paragraph.</div>
  <div class="owl-item">The paragraph.</div>
  <div class="test">The paragraph.</div>
</div>

score 0 · Answer 3 · answered Oct 07 '20 at 10:44

nth-child() simply looks at the siblings of .owl-stage div. It cannot filter classes like visibility. For ideas on filtering by nth-class maybe see here.

In your case you could use 7th or 8th child as below:

.owl-stage div.visibility:nth-child(7) {
  background: blue;
}
.owl-stage div.visibility:nth-child(8) {
  background: red;
}

<div class="owl-stage">
  <div class="owl-item">The paragraph.</div>
  <div class="owl-item">The paragraph.</div>
  <div class="owl-item">The paragraph.</div>
  <div class="owl-item">The paragraph.</div>
  <div class="owl-item">The paragraph.</div>
  <div class="owl-item">The paragraph.</div>
  <div class="owl-item visibility">The paragraph.</div>
  <div class="owl-item visibility">The paragraph.</div>
  <div class="owl-item visibility">The paragraph.</div>
  <div class="owl-item visibility">The paragraph.</div>
  <div class="owl-item">The paragraph.</div>
  <div class="owl-item">The paragraph.</div>
  <div class="owl-item">The paragraph.</div>
  <div class="owl-item">The paragraph.</div>
  <div class="owl-item">The paragraph.</div>
  <div class="owl-item">The paragraph.</div>
  <div class="test">The paragraph.</div>
</div>

css nth-child() of a subclass not Working

3 Answers3