1 | # selector-pseudo-class-whitelist
|
2 |
|
3 | Specify a whitelist of allowed pseudo-class selectors.
|
4 |
|
5 |
|
6 | ```css
|
7 | a:hover {}
|
8 | /** ↑
|
9 | * This pseudo-class selector */
|
10 | ```
|
11 |
|
12 | This rule ignores selectors that use variable interpolation e.g. `:#{$variable} {}`.
|
13 |
|
14 | ## Options
|
15 |
|
16 | `array|string|regex`: `["array", "of", "unprefixed", /pseudo-classes/ or "/regex/"]|"pseudo-class"|/regex/`
|
17 |
|
18 | If a string is surrounded with `"/"` (e.g. `"/^nth-/"`), it is interpreted as a regular expression. This allows, for example, easy targeting of shorthands: `/^nth-/` will match `nth-child`, `nth-last-child`, `nth-of-type`, etc.
|
19 |
|
20 | Given:
|
21 |
|
22 | ```
|
23 | ["hover", "/^nth-/"]
|
24 | ```
|
25 |
|
26 | The following patterns are considered violations:
|
27 |
|
28 |
|
29 | ```css
|
30 | a:focus {}
|
31 | ```
|
32 |
|
33 |
|
34 | ```css
|
35 | a:first-of-type {}
|
36 | ```
|
37 |
|
38 | The following patterns are _not_ considered violations:
|
39 |
|
40 |
|
41 | ```css
|
42 | a:hover {}
|
43 | ```
|
44 |
|
45 |
|
46 | ```css
|
47 | a:nth-of-type(5) {}
|
48 | ```
|
49 |
|
50 |
|
51 | ```css
|
52 | a:nth-child(2) {}
|
53 | ```
|