JSFiddle - React, Tailwind, and code Playground

by mhfaust

HTML

<input value ="1" />
<input value ="2" type="text" />
<input value ="3" type="password" />
<input value ="4" class="someClass" />
<br /><br />
<input value="A" class="B C D" id="myId"/>
<input value="X" class="Y Z" id="myId"/>

CSS

input:not([type="text"], [type="password"], [type="password"]) {border:3px solid red}
input:not(#someId[type="text"]){border:3px solid green;}

input.B:not(#myId){border:3px solid blue;}
input.B:not([type="text"]){border:3px solid purple;}

input.B.C.D{border:3px solid purple;}
input.Y.Z{border:3px solid pink;}