1 | # selector-pseudo-element-colon-notation
|
2 |
|
3 | Specify single or double colon notation for applicable pseudo-elements.
|
4 |
|
5 |
|
6 | ```css
|
7 | a::before {}
|
8 | /** ↑
|
9 | * This notation */
|
10 | ```
|
11 |
|
12 | The `::` notation was chosen for _pseudo-elements_ to establish a discrimination between _pseudo-classes_ (which subclass existing elements) and _pseudo-elements_ (which are elements not represented in the document tree).
|
13 |
|
14 | However, for compatibility with existing style sheets, user agents also accept the previous one-colon notation for _pseudo-elements_ introduced in CSS levels 1 and 2 (namely, `:first-line`, `:first-letter`, `:before` and `:after`).
|
15 |
|
16 | The [`fix` option](../../../docs/user-guide/usage/options.md#fix) can automatically fix all of the problems reported by this rule.
|
17 |
|
18 | ## Options
|
19 |
|
20 | `string`: `"single"|"double"`
|
21 |
|
22 | ### `"single"`
|
23 |
|
24 | Applicable pseudo-elements _must always_ use the single colon notation.
|
25 |
|
26 | The following patterns are considered violations:
|
27 |
|
28 |
|
29 | ```css
|
30 | a::before { color: pink; }
|
31 | ```
|
32 |
|
33 |
|
34 | ```css
|
35 | a::after { color: pink; }
|
36 | ```
|
37 |
|
38 |
|
39 | ```css
|
40 | a::first-letter { color: pink; }
|
41 | ```
|
42 |
|
43 |
|
44 | ```css
|
45 | a::first-line { color: pink; }
|
46 | ```
|
47 |
|
48 | The following patterns are _not_ considered violations:
|
49 |
|
50 |
|
51 | ```css
|
52 | a:before { color: pink; }
|
53 | ```
|
54 |
|
55 |
|
56 | ```css
|
57 | a:after { color: pink; }
|
58 | ```
|
59 |
|
60 |
|
61 | ```css
|
62 | a:first-letter { color: pink; }
|
63 | ```
|
64 |
|
65 |
|
66 | ```css
|
67 | a:first-line { color: pink; }
|
68 | ```
|
69 |
|
70 |
|
71 | ```css
|
72 | input::placeholder { color: pink; }
|
73 | ```
|
74 |
|
75 |
|
76 | ```css
|
77 | li::marker { font-variant-numeric: tabular-nums; }
|
78 | ```
|
79 |
|
80 | ### `"double"`
|
81 |
|
82 | Applicable pseudo-elements _must always_ use the double colon notation.
|
83 |
|
84 | The following patterns are considered violations:
|
85 |
|
86 |
|
87 | ```css
|
88 | a:before { color: pink; }
|
89 | ```
|
90 |
|
91 |
|
92 | ```css
|
93 | a:after { color: pink; }
|
94 | ```
|
95 |
|
96 |
|
97 | ```css
|
98 | a:first-letter { color: pink; }
|
99 | ```
|
100 |
|
101 |
|
102 | ```css
|
103 | a:first-line { color: pink; }
|
104 | ```
|
105 |
|
106 | The following patterns are _not_ considered violations:
|
107 |
|
108 |
|
109 | ```css
|
110 | a::before { color: pink; }
|
111 | ```
|
112 |
|
113 |
|
114 | ```css
|
115 | a::after { color: pink; }
|
116 | ```
|
117 |
|
118 |
|
119 | ```css
|
120 | a::first-letter { color: pink; }
|
121 | ```
|
122 |
|
123 |
|
124 | ```css
|
125 | a::first-line { color: pink; }
|
126 | ```
|
127 |
|
128 |
|
129 | ```css
|
130 | input::placeholder { color: pink; }
|
131 | ```
|
132 |
|
133 |
|
134 | ```css
|
135 | li::marker { font-variant-numeric: tabular-nums; }
|
136 | ```
|