![\"PostCSS](\"https://postcss.github.io/postcss/logo.svg\"){kind=logo}
][PostCSS]\n\n`npm install css-has-pseudo --save-dev`\n\n[PostCSS Has Pseudo] lets you style elements relative to other elements in CSS, following the [Selectors Level 4] specification.\n\nTo use this feature you need to do two things :\n- add the [PostCSS plugin](#usage) that transforms the selector into a class or attribute\n- add the [browser polyfill](#browser) that sets the attribute or class on elements in a browser\n\n```css\n.title:has(+ p) {\n\tmargin-bottom: 1.5rem;\n}\n\n/* becomes */\n\n.js-has-pseudo [csstools-has-1a-38-2x-38-30-2t-1m-2w-2p-37-14-17-w-34-15]:not(does-not-exist) {\n\tmargin-bottom: 1.5rem;\n}\n.title:has(+ p) {\n\tmargin-bottom: 1.5rem;\n}\n```\n\n## Usage\n\nAdd [PostCSS Has Pseudo] to your project:\n\n```bash\nnpm install postcss css-has-pseudo --save-dev\n```\n\nUse it as a [PostCSS] plugin:\n\n```js\nconst postcss = require('postcss');\nconst postcssHasPseudo = require('css-has-pseudo');\n\npostcss([\n\tpostcssHasPseudo(/* pluginOptions */)\n]).process(YOUR_CSS /*, processOptions */);\n```\n\n\n\n## Options\n\n### preserve\n\nThe `preserve` option determines whether the original notation\nis preserved. By default the original rules are preserved.\n\n```js\npostcssHasPseudo({ preserve: false })\n```\n\n```css\n.title:has(+ p) {\n\tmargin-bottom: 1.5rem;\n}\n\n/* becomes */\n\n.js-has-pseudo [csstools-has-1a-38-2x-38-30-2t-1m-2w-2p-37-14-17-w-34-15]:not(does-not-exist) {\n\tmargin-bottom: 1.5rem;\n}\n```\n\n### specificityMatchingName\n\nThe `specificityMatchingName` option allows you to change the selector that is used to adjust specificity.\nThe default value is `does-not-exist`.\nIf this is an actual class, id or tag name in your code, you will need to set a different option here.\n\nSee how `:not` is used to modify [specificity](#specificity).\n\n```js\npostcssHasPseudo({ specificityMatchingName: 'something-random' })\n```\n\n[specificity 1, 2, 0](https://polypane.app/css-specificity-calculator/#selector=.x%3Ahas(%3E%20%23a%3Ahover))\n\nBefore :\n\n```css\n.x:has(> #a:hover) {\n\torder: 11;\n}\n```\n\nAfter :\n\n[specificity 1, 2, 0](https://polypane.app/css-specificity-calculator/#selector=%5Bcsstools-has-1a-3c-1m-2w-2p-37-14-1q-w-z-2p-1m-2w-33-3a-2t-36-15%5D%3Anot(%23does-not-exist)%3Anot(.does-not-exist))\n\n```css\n[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-z-2p-1m-2w-33-3a-2t-36-15]:not(#does-not-exist):not(.does-not-exist) {\n\torder: 11;\n}\n```\n\n## ⚠️ Known shortcomings\n\n### Performance\n\nDetermining which elements match a `:has` selector is relatively slow through a polyfill compared to the native feature.\n\nA very large DOM or many and complex `:has` selectors can cause performance issues. \nJavaScript frameworks that rewrite the DOM will be particularly affected by this.\n\n_Any contributions to speedup matching are welcome. \nPlease open an issue to discuss proposed changes if you are interested in contributing._\n\n### Specificity\n\n`:has` transforms will result in at least one attribute selector with specificity `0, 1, 0`.With an extra paragraph
\n