CSS: How to select last child of a parent based on the child's class

Question

I need to change the color of text 5 to red.

This doesn't work. What is the possible resolution to this problem?

Note: This is a small representation of the actual problem. So the placement of children is not fixed, nor their numbers.

#parent>.child:last-of-type {
  color: red;
}

<div id="parent">
  <span class="child">1</span><br>
  <a>2</a><br>
  <span class="child">3</span><br>
  <a>4</a><br>
  <span class="child">5</span><br>
  <span>6</span>
</div>

the short answer is you cannot not as last-child is the last span whataver you will do and whataver the class you use — Temani Afif, Feb 06 '18 at 10:14
This is not the duplicate as the last child is a span in my case. Please read the question carefully @TemaniAfif — Himanshu Aggarwal, Feb 06 '18 at 10:15
@HimanshuAggarwal it's a perfect duplicate :) you want to select based on a class which is the same as the other question — Temani Afif, Feb 06 '18 at 10:16
@HimanshuAggarwal same logic with last-child or last-type ;) — Temani Afif, Feb 06 '18 at 10:16
Okay. I think, there is possibly no solution with CSS. Sad! :( — Himanshu Aggarwal, Feb 06 '18 at 10:23

score 0 · Answer 1 · edited Feb 06 '18 at 10:57

0

Try this one

#parent span:nth-child(9) {
  background: red;
}

<div id="parent">
  <span class="child">1</span><br>
  <a>2</a><br>
  <span class="child">3</span><br>
  <a>4</a><br>
  <span class="child">5</span><br>
  <span>6</span>
</div>

edited Feb 06 '18 at 10:57

Temani Afif

245,468
26
309
415

answered Feb 06 '18 at 10:40

Nisha

623
5
7

The value of n is not fixed. This is a small representation of the actual problem. – Himanshu Aggarwal Feb 06 '18 at 13:12

CSS: How to select last child of a parent based on the child's class

1 Answers1