JSFiddle - React, Tailwind, and code Playground

by Alphonsio

HTML

<div key1="value1">[key1] { background-color: #ea2f86; }</div>
<div key2="value2">[key2="value2"] { background-color: #f09c0a; }</div>
<div key3="start-substring-end">[key3*="substring"] { background-color:  #fae000; }</div>
<div key4="start-value">[key4^="start"] { background-color: #93e223; }</div>
<div key5="value-end">[key5$="end"] { background-color: #4070d3; }</div>
<div key6="hyphen-end">[key6|="hyphen"] { background-color: #493c9e; }</div>

CSS

[key1] { background-color: #ea2f86; }
[key2="value2"] { background-color: #f09c0a; }
[key3*="substring"] { background-color:  #fae000; }
[key4^="start"] { background-color: #93e223; }
[key5$="end"] { background-color: #4070d3; }
[key6|="hyphen"] { background-color: #493c9e; }

* { background-color: #222; }
div { padding: 0.7rem; color: white; font-weight: bold; }