JSFiddle - React, Tailwind, and code Playground

by oti ext

HTML

<div class="a">1</div>

<div class="a">2</div>

<div class="a">3</div>

CSS

.a {
  display: inline-block;
  width: 100px;
  height: 50px;
  border: 1px solid currentColor;
}

.a.a {
  background-color: gold;
}

.a {
  /* 詳細度が .a.a に負けてる */  
  background-color: skyblue;
}

/* 1,3にマッチ……されないっぽい */
.a:not(.a.a) {
  background-color: tomato;
}

/* やめろ */
.a:not([class="a a a"]) {
  background-color: limegreen;
}