:any-link
:any-link lets you to use the proposed :any-link
pseudo-class in CSS.
:any-link
simplifies selectors targeting links, as 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
.
Options
prefix (string): prepends a prefix (surrounded by dashes) to the pseudo-class, preventing any clash with native syntax.
{
prefix: 'foo'
}
Usage
Add :any-link to your build tool:
npm install :any-link --save-dev
Node
require(':any-link').process(YOUR_CSS, { });
PostCSS
Add PostCSS to your build tool:
npm install postcss --save-dev
Load :any-link as a PostCSS plugin:
postcss([
require(':any-link')({ })
]).process(YOUR_CSS, );
Gulp
Add Gulp PostCSS to your build tool:
npm install gulp-postcss --save-dev
Enable :any-link within your Gulpfile:
var postcss = require('gulp-postcss');
gulp.task('css', function () {
return gulp.src('./src/*.css').pipe(
postcss([
require(':any-link')({ })
])
).pipe(
gulp.dest('.')
);
});
Grunt
Add Grunt PostCSS to your build tool:
npm install grunt-postcss --save-dev
Enable :any-link within your Gruntfile:
grunt.loadNpmTasks('grunt-postcss');
grunt.initConfig({
postcss: {
options: {
use: [
require(':any-link')({ })
]
},
dist: {
src: '*.css'
}
}
});
Alternatives
Here are a few other ways to simulate the effect of [PostCSS Pseudo-Class Any-Link].
@custom-selector :--any-link :link, :visited;
:--any-link { }
:matches(:link, :visited) { }
:link, :visited { }