1

I have a HTML which users will enter. My job is to select "mychild" class names and style different colors for each mychild.

Problem: I use first-of-type or nth-of-type() (I did use first-chil, too) they all don't work out. So that first-of-type, nth-of-type() or first-chil are not a solution.

jsfiddle

.parent .mychild:first-of-type {
  text-decoration: underline;
  background: yellow;
}

.parent .mychild:nth-of-type(2) {
  text-decoration: underline;
  background: red;
}

.parent .mychild:nth-of-type(3) {
  text-decoration: underline;
  background: green;
}
<div class="parent">
  <div class="other">Child</div>
  <div class="other">Child</div>
  <div class="mychild">Child</div>
  <div class="other">Child</div>
  <div class="other">Child</div>
  <div class="mychild">Child</div>
  <div class="other">Child</div>
  <div class="other">Child</div>
  <div class="mychild">Child</div>
</div>
abcid d
  • 2,821
  • 7
  • 31
  • 46
  • 2
    Hi Andrei Gheorghiu, can you please remove "Duplicate"? because my question is completely different. Thanks – abcid d Apr 10 '19 at 19:46
  • @abcidd Your question is unclear as to what your requirements are, so this would not be reopen-worthy (as it would just get re-closed as unclear). For example, will your markup always look like this or will there be eventually a 4th or 5th `myChild`? What about the `other` children in between; will there always be two? At any rate, I have found an actual appropriate dupe and adjusted the banner to show that one, instead. – TylerH Apr 11 '19 at 20:01

0 Answers0