JSFiddle - React, Tailwind, and code Playground

by Constantin Deaf

HTML

<div class="wrapper">
  <div class="myclass1">This text should appear red.</div>
  <div class="myclass1">This text should appear green.</div>
  <div class="myclass1">This text should appear green.</div>
  <div>this :first-of-type working as exepted</div>
</div>

<div class="wrapper">
  <div>this :last-of-type working as exepted</div>
  <div class="myclass2">This text should appear red.</div>
  <div class="myclass2">This text should appear red.</div>
  <div class="myclass2">This text should appear green.</div>
</div>

<div class="wrapper">
  <div>but this :first-of-type fail</div>
  <div class="myclass1">This text should appear red.</div>
  <div class="myclass1">This text should appear green.</div>
  <div class="myclass1">This text should appear green.</div>
</div>

<div class="wrapper">
  <div class="myclass2">This text should appear red.</div>
  <div class="myclass2">This text should appear red.</div>
  <div class="myclass2">This text should appear green.</div>
  <div>and this :last-of-type fail</div>
</div>

CSS

div.wrapper {
  margin-bottom: 10px
}

div[class*="myclass1"]:not(:first-of-type) {
  color: green
}

div[class*="myclass1"]:first-of-type {
  color: red
}

div[class*="myclass2"]:not(:last-of-type) {
  color: red
}

div[class*="myclass2"]:last-of-type {
  color: green
}