Skip to content

Commit b7182b6

Browse files
jonathantnealromainmenke
authored andcommitted
Update README.md
1 parent d6fc749 commit b7182b6

File tree

1 file changed

+108
-0
lines changed

1 file changed

+108
-0
lines changed
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
# PostCSS Pseudo-Class Any-Link [![Build Status][ci-img]][ci]
2+
3+
<img align="right" width="135" height="95" src="http://postcss.github.io/postcss/logo-leftp.png" title="Philosopher’s stone, logo of PostCSS">
4+
5+
[PostCSS Pseudo-Class Any-Link] is a [PostCSS] plugin that allows you to use the proposed [`:any-link`] pseudo-class in CSS.
6+
7+
`:any-link` simplifies selectors targeting links, since the naming of `:link` is misleading; it specifically means unvisited links only, rather than all links.
8+
9+
```css
10+
/* before */
11+
12+
nav :any-link > span {
13+
background-color: yellow;
14+
}
15+
16+
/* after */
17+
18+
nav :link > span,
19+
nav :visited > span {
20+
background-color: yellow;
21+
}
22+
```
23+
24+
From the [proposal]:
25+
26+
> 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`].
27+
28+
## Usage
29+
30+
You just need to follow these two steps to use [PostCSS Pseudo-Class Any-Link]:
31+
32+
1. Add [PostCSS] to your build tool.
33+
2. Add [PostCSS Pseudo-Class Any-Link] as a PostCSS process.
34+
35+
```sh
36+
npm install postcss-pseudo-class-any-link --save-dev
37+
```
38+
39+
### Node
40+
41+
```js
42+
postcss([ require('postcss-pseudo-class-any-link')({ /* options */ }) ])
43+
```
44+
45+
### Grunt
46+
47+
Add [Grunt PostCSS] to your build tool:
48+
49+
```sh
50+
npm install postcss-pseudo-class-any-link --save-dev
51+
```
52+
53+
Enable [PostCSS Pseudo-Class Any-Link] within your Gruntfile:
54+
55+
```js
56+
grunt.loadNpmTasks('grunt-postcss');
57+
58+
grunt.initConfig({
59+
postcss: {
60+
options: {
61+
processors: [
62+
require('postcss-pseudo-class-any-link')({ /* options */ })
63+
]
64+
},
65+
dist: {
66+
src: 'css/*.css'
67+
}
68+
}
69+
});
70+
```
71+
72+
### Options
73+
74+
**prefix** (string): prepends a prefix (surrounded by dashes) to the pseudo-class, preventing any clash with native syntax.
75+
76+
```js
77+
{
78+
prefix: 'foo' // pseudo-class becomes :-foo-any-link
79+
}
80+
```
81+
82+
### Alternatives
83+
84+
```css
85+
/* Using @custom-selector; supported nowhere yet */
86+
87+
@custom-selector :--any-link :link, :visited;
88+
89+
:--any-link { /* ... */ }
90+
91+
/* Using :matches; supported in Firefox 4+, Chrome 12+, Opera 15+, Safari 5.1+ */
92+
93+
:matches(:link, :visited) { /* ... */ }
94+
95+
/* Using :link and :visited; supported everywhere */
96+
97+
:link, :visited { /* ... */ }
98+
```
99+
100+
[`:any-link`]: http://http://dev.w3.org/csswg/selectors/#any-link-pseudo
101+
[`:link`]: http://dev.w3.org/csswg/selectors/#link-pseudo
102+
[`:visited`]: http://dev.w3.org/csswg/selectors/#visited-pseudo
103+
[ci]: https://travis-ci.org/jonathantneal/postcss-pseudo-class-any-link
104+
[ci-img]: https://travis-ci.org/jonathantneal/postcss-pseudo-class-any-link.svg
105+
[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
106+
[PostCSS]: https://github.com/postcss/postcss
107+
[PostCSS Pseudo-Class Any-Link]: https://github.com/jonathantneal/postcss-pseudo-class-any-link
108+
[proposal]: http://dev.w3.org/csswg/selectors/

0 commit comments

Comments
 (0)