PostCSS Pseudo Class Any Link lets you :any-link pseudo-class in CSS,
following the Selectors specification.
```pcss nav :any-link > span { background-color: yellow; }
/ becomes /
nav :link > span, nav :visited > span { background-color: yellow; }
nav :any-link > span { background-color: yellow; } ```
From the proposal:
The
:any-linkpseudo-class represents an element that acts as the source anchor of a hyperlink. It matches an element if the element would match:linkor:visited.
Add PostCSS Pseudo Class Any Link to your project:
bash
npm install postcss postcss-pseudo-class-any-link --save-dev
Use PostCSS Pseudo Class Any Link as a PostCSS plugin:
```js const postcss = require('postcss'); const postcssPseudoClassAnyLink = require('postcss-pseudo-class-any-link');
postcss([ postcssPseudoClassAnyLink(/ pluginOptions /) ]).process(YOUR_CSS /, processOptions /); ```
PostCSS Pseudo Class Any Link runs in all Node environments, with special instructions for:
| Node | PostCSS CLI | Webpack | Create React App | Gulp | Grunt | | --- | --- | --- | --- | --- | --- |
The preserve option determines whether the original :any-link rule is
preserved. By default, it is preserved.
js
postcssPseudoClassAnyLink({ preserve: false })
```pcss nav :any-link > span { background-color: yellow; }
/ becomes /
nav :link > span, nav :visited > span { background-color: yellow; } ```
The subFeatures.areaHrefNeedsFixing option determines if <area href> elements should match :any-link pseudo-class.
In IE and Edge these do not match :link or :visited.
This increased CSS bundle size and is disabled by default.
js
postcssPseudoClassAnyLink({
subFeatures: {
areaHrefNeedsFixing: true
}
})
```pcss nav :any-link > span { background-color: yellow; }
/ becomes /
nav :link > span, nav :visited > span, area[href] > span { background-color: yellow; } ```