|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136 |
- # selector-pseudo-element-colon-notation
-
- Specify single or double colon notation for applicable pseudo-elements.
-
- <!-- prettier-ignore -->
- ```css
- a::before {}
- /** ↑
- * This notation */
- ```
-
- 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).
-
- 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`).
-
- The [`fix` option](../../../docs/user-guide/usage/options.md#fix) can automatically fix all of the problems reported by this rule.
-
- ## Options
-
- `string`: `"single"|"double"`
-
- ### `"single"`
-
- Applicable pseudo-elements _must always_ use the single colon notation.
-
- The following patterns are considered violations:
-
- <!-- prettier-ignore -->
- ```css
- a::before { color: pink; }
- ```
-
- <!-- prettier-ignore -->
- ```css
- a::after { color: pink; }
- ```
-
- <!-- prettier-ignore -->
- ```css
- a::first-letter { color: pink; }
- ```
-
- <!-- prettier-ignore -->
- ```css
- a::first-line { color: pink; }
- ```
-
- The following patterns are _not_ considered violations:
-
- <!-- prettier-ignore -->
- ```css
- a:before { color: pink; }
- ```
-
- <!-- prettier-ignore -->
- ```css
- a:after { color: pink; }
- ```
-
- <!-- prettier-ignore -->
- ```css
- a:first-letter { color: pink; }
- ```
-
- <!-- prettier-ignore -->
- ```css
- a:first-line { color: pink; }
- ```
-
- <!-- prettier-ignore -->
- ```css
- input::placeholder { color: pink; }
- ```
-
- <!-- prettier-ignore -->
- ```css
- li::marker { font-variant-numeric: tabular-nums; }
- ```
-
- ### `"double"`
-
- Applicable pseudo-elements _must always_ use the double colon notation.
-
- The following patterns are considered violations:
-
- <!-- prettier-ignore -->
- ```css
- a:before { color: pink; }
- ```
-
- <!-- prettier-ignore -->
- ```css
- a:after { color: pink; }
- ```
-
- <!-- prettier-ignore -->
- ```css
- a:first-letter { color: pink; }
- ```
-
- <!-- prettier-ignore -->
- ```css
- a:first-line { color: pink; }
- ```
-
- The following patterns are _not_ considered violations:
-
- <!-- prettier-ignore -->
- ```css
- a::before { color: pink; }
- ```
-
- <!-- prettier-ignore -->
- ```css
- a::after { color: pink; }
- ```
-
- <!-- prettier-ignore -->
- ```css
- a::first-letter { color: pink; }
- ```
-
- <!-- prettier-ignore -->
- ```css
- a::first-line { color: pink; }
- ```
-
- <!-- prettier-ignore -->
- ```css
- input::placeholder { color: pink; }
- ```
-
- <!-- prettier-ignore -->
- ```css
- li::marker { font-variant-numeric: tabular-nums; }
- ```
|