A :has() selector plugin for jsincss
:has() selector, for selecting elements that contain an element matching a selector.
You can download jsincss-has-selector and add it to your codebase manually, or download it with npm:
npm install jsincss-has-selector
Another option that works for building or testing, that isn't ideal for production use, is linking to the module directly from a CDN like unpkg:
This plugin exists in three different formats:
You can import this plugin using the native
You can also use the CommonJS-formatted module located at index.js with
require() for use with bundlers that don't use vanilla JS modules.
Once you have imported this plugin into your module, you can use the plugin as
Using JS-in-CSS Stylesheets
The main goal of this plugin is to allow CSS authors the ability to emulate the behaviour of the
:has() selector from CSS, to select elements containing element(s) matching another selector.
The plugin has the following format:
selectoris a string containing a CSS selector
childis a string containing a CSS selector for matching a child
ruleis a string or template string containing a CSS rule
This example will use the
jsincss package and any helper plugins you want:
And then import both the
jsincss plugin and the stylesheet into your code and run them like this, suppling any
events list the
jsincss plugin might need to apply the stylesheet only the the element(s) and event(s) you require, depending on what you're doing: