JSFiddle - React, Tailwind, and code Playground

Confirming that I'm not crazy about how attribute selector specificity works.

by nilloc

HTML

<div id="parent" data-types="tester"><div data-type="tester">a</div></div>

CSS

[data-types~="tester"]{
  background:teal;
  color:white;
  padding:10px;
}

[data-types~="tester"] > [data-type]{
  background:red;
}

[data-types~="tester"] > [data-type="tester"]{
  background:orange;
}

JavaScript

let found = document.querySelector('div:has(.kid)');
console.log(found);