PostCSS Pseudo-Class Any-Link
PostCSS Pseudo-Class Any-Link is a PostCSS plugin that allows you to use the proposed :any-link
pseudo-class in CSS.
:any-link
simplifies selectors targeting links, since the naming of :link
is misleading; it specifically means unvisited links only, rather than all links.
nav :any-link > span {
background-color: yellow;
}
nav :link > span,
nav :visited > span {
background-color: yellow;
}
From the proposal:
The :any-link
pseudo-class represents an element that acts as the source anchor of a hyperlink. It matches an element if the element would match :link
or :visited
.
Usage
You just need to follow these two steps to use PostCSS Pseudo-Class Any-Link:
- Add PostCSS to your build tool.
- Add PostCSS Pseudo-Class Any-Link as a PostCSS process.
npm install postcss-pseudo-class-any-link --save-dev
Node
postcss([ require('postcss-pseudo-class-any-link')({ }) ])
Grunt
Add Grunt PostCSS to your build tool:
npm install postcss-pseudo-class-any-link --save-dev
Enable PostCSS Pseudo-Class Any-Link within your Gruntfile:
grunt.loadNpmTasks('grunt-postcss');
grunt.initConfig({
postcss: {
options: {
processors: [
require('postcss-pseudo-class-any-link')({ })
]
},
dist: {
src: 'css/*.css'
}
}
});
Options
prefix (string): prepends a prefix (surrounded by dashes) to the pseudo-class, preventing any clash with native syntax.
{
prefix: 'foo'
}
Alternatives
@custom-selector :--any-link :link, :visited;
:--any-link { }
:matches(:link, :visited) { }
:link, :visited { }