@csstools/css-has-pseudo-experimental
Advanced tools
EXPERIMENTAL : Style elements relative to other elements in CSS
⚠️ Experimental version of CSS Has Pseudo
EXPERIMENTAL CSS Has Pseudo lets you style elements relative to other elements in CSS, following the Selectors Level 4 specification.
a:has(> img) {
/* style links that contain an image */
}
h1:has(+ p) {
/* style level 1 headings that are followed by a paragraph */
}
section:not(:has(h1, h2, h3, h4, h5, h6)) {
/* style sections that don’t contain any heading elements */
}
body:has(:focus) {
/* style the body if it contains a focused element */
}
Next, use your transformed CSS with this script:
<link rel="stylesheet" href="TRANSFORMED.css">
<script src="https://unpkg.com/@csstools/css-has-pseudo-experimental/dist/browser-global.js"></script>
<script>cssHasPseudo(document)</script>
⚠️ Please use a versioned url, like this : https://unpkg.com/@csstools/css-has-pseudo-experimental@0.1.0/dist/browser-global.js
Without the version, you might unexpectedly get a new major version of the library with breaking changes.
⚠️ If you were using an older version via a CDN, please update the entire url. The old URL will no longer work.
That’s it. The script works in most browser versions, including Internet Explorer 11. With a Mutation Observer polyfill, the script will work down to Internet Explorer 9.
See README BROWSER for more information.
The PostCSS plugin clones rules containing :has,
replacing them with an alternative [:has] selector.
body:has(:focus) {
background-color: yellow;
}
section:not(:has(h1, h2, h3, h4, h5, h6)) {
background-color: gray;
}
/* becomes */
[csstools-has-2q-33-2s-3d-1m-2w-2p-37-14-1m-2u-33-2r-39-37-15]:not(does-not-exist) {
background-color: yellow;
}
body:has(:focus) {
background-color: yellow;
}
[csstools-has-37-2t-2r-38-2x-33-32-1m-32-33-38-14-1m-2w-2p-37-14-2w-1d-18-w-2w-1e-18-w-2w-1f-18-w-2w-1g-18-w-2w-1h-18-w-2w-1i-15-15]:not(does-not-exist):not(does-not-exist) {
background-color: gray;
}
section:not(:has(h1, h2, h3, h4, h5, h6)) {
background-color: gray;
}
Next, the JavaScript library adds a [:has] attribute to
elements otherwise matching :has natively.
<body csstools-has-2q-33-2s-3d-1m-2w-2p-37-14-1m-2u-33-2r-39-37-15>
<input value="This element is focused">
</body>
When you use postcss-preset-env you must disable the regular plugin.
The experimental plugin must be added after any other plugin that modifies selectors.
plugins: [
// other plugins
postcssPresetEnv({
features: {
'css-has-pseudo': false
}
}),
// other plugins
cssHasPseudoExperimental(), // last
]
FAQs
EXPERIMENTAL : Style elements relative to other elements in CSS
The npm package @csstools/css-has-pseudo-experimental receives a total of 43 weekly downloads. As such, @csstools/css-has-pseudo-experimental popularity was classified as not popular.
We found that @csstools/css-has-pseudo-experimental demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports PHP with full Composer and Packagist integration, enabling developers to search packages, generate SBOMs, and protect their PHP dependencies from supply chain threats.
Security News
An AI agent is merging PRs into major OSS projects and cold-emailing maintainers to drum up more work.
Research
/Security News
Chrome extension CL Suite by @CLMasters neutralizes 2FA for Facebook and Meta Business accounts while exfiltrating Business Manager contact and analytics data.