Add Pseudo selectors

features/before-after.yml

@@ -0,0 +1,13 @@
+name: ::before and ::after
+description: The `::before` and `::after` CSS pseudo-elements select inline boxes preceding and following an element. They are often used with the `content` property to generate cosmetic content.
+spec: https://drafts.csswg.org/css-pseudo-4/#generated-content
+caniuse: css-gencontent
+status:
+  compute_from:
+    - css.selectors.before
+    - css.selectors.after
+compat_features:
+  - css.selectors.before
+  - css.selectors.before.animation_and_transition_support
+  - css.selectors.after
+  - css.selectors.after.animation_and_transition_support

features/before-after.yml.dist

@@ -0,0 +1,64 @@
+# Generated from: before-after.yml
+# Do not edit this file by hand. Edit the source file instead!
+
+status:
+  baseline: high
+  baseline_low_date: 2015-07-29
+  baseline_high_date: 2018-01-29
+  support:
+    chrome: "1"
+    chrome_android: "18"
+    edge: "12"
+    firefox: "1.5"
+    firefox_android: "4"
+    safari: "4"
+    safari_ios: "3.2"
+compat_features:
+  # baseline: high
+  # baseline_low_date: 2015-07-29
+  # baseline_high_date: 2018-01-29
+  # support:
+  #   chrome: "1"
+  #   chrome_android: "18"
+  #   edge: "12"
+  #   firefox: "1.5"
+  #   firefox_android: "4"
+  #   safari: "4"
+  #   safari_ios: "3"
+  - css.selectors.before
+
+  # ⬇️ Same status as overall feature ⬇️
+  # baseline: high
+  # baseline_low_date: 2015-07-29
+  # baseline_high_date: 2018-01-29
+  # support:
+  #   chrome: "1"
+  #   chrome_android: "18"
+  #   edge: "12"
+  #   firefox: "1.5"
+  #   firefox_android: "4"
+  #   safari: "4"
+  #   safari_ios: "3.2"
+  - css.selectors.after
+
+  # baseline: high
+  # baseline_low_date: ≤2017-03-27
+  # baseline_high_date: ≤2019-09-27
+  # support:
+  #   chrome: "26"
+  #   chrome_android: "26"
+  #   edge: "12"
+  #   firefox: "4"
+  #   firefox_android: "4"
+  #   safari: ≤10.1
+  #   safari_ios: ≤10.3
+  - css.selectors.before.animation_and_transition_support
+
+  # baseline: false
+  # support:
+  #   chrome: "26"
+  #   chrome_android: "26"
+  #   edge: "12"
+  #   firefox: "4"
+  #   firefox_android: "4"
+  - css.selectors.after.animation_and_transition_support

features/file-selector-button.yml

@@ -0,0 +1,6 @@
+name: ::file-selector-button
+description: The `::file-selector-button` CSS pseudo-element selects the button of a `<input type="file">` element.
+spec: https://drafts.csswg.org/css-pseudo-4/#file-selector-button-pseudo
+group: selectors
+compat_features:
+  - css.selectors.file-selector-button

features/file-selector-button.yml.dist

@@ -0,0 +1,17 @@
+# Generated from: file-selector-button.yml
+# Do not edit this file by hand. Edit the source file instead!
+
+status:
+  baseline: high
+  baseline_low_date: 2021-04-26
+  baseline_high_date: 2023-10-26
+  support:
+    chrome: "89"
+    chrome_android: "89"
+    edge: "89"
+    firefox: "82"
+    firefox_android: "82"
+    safari: "14.1"
+    safari_ios: "14.5"
+compat_features:
+  - css.selectors.file-selector-button

features/first-letter.yml

@@ -0,0 +1,11 @@
+name: ::first-letter
+description: The `::first-letter` CSS pseudo-element selects the first letter in an element for styling.
+spec: https://drafts.csswg.org/css-pseudo-4/#first-letter-pseudo
+group: selectors
+caniuse: css-first-letter
+status:
+  compute_from: css.selectors.first-letter
+compat_features:
+  - css.selectors.first-letter
+  - css.selectors.first-letter.dutch_ij_digraph
+  - css.selectors.first-letter.svg_text_element

features/first-letter.yml.dist

@@ -0,0 +1,41 @@
+# Generated from: first-letter.yml
+# Do not edit this file by hand. Edit the source file instead!
+
+status:
+  baseline: high
+  baseline_low_date: 2015-07-29
+  baseline_high_date: 2018-01-29
+  support:
+    chrome: "1"
+    chrome_android: "18"
+    edge: "12"
+    firefox: "1"
+    firefox_android: "4"
+    safari: "1"
+    safari_ios: "1"
+compat_features:
+  # ⬇️ Same status as overall feature ⬇️
+  # baseline: high
+  # baseline_low_date: 2015-07-29
+  # baseline_high_date: 2018-01-29
+  # support:
+  #   chrome: "1"
+  #   chrome_android: "18"
+  #   edge: "12"
+  #   firefox: "1"
+  #   firefox_android: "4"
+  #   safari: "1"
+  #   safari_ios: "1"
+  - css.selectors.first-letter
+
+  # baseline: false
+  # support:
+  #   firefox: "87"
+  #   firefox_android: "87"
+  - css.selectors.first-letter.dutch_ij_digraph
+
+  # baseline: false
+  # support:
+  #   firefox: "124"
+  #   firefox_android: "124"
+  - css.selectors.first-letter.svg_text_element

features/first-line.yml

@@ -0,0 +1,10 @@
+name: ::first-line
+description: The `::first-line` CSS pseudo-element selects the first line of text in an element for styling.
+spec: https://drafts.csswg.org/css-pseudo-4/#first-line-pseudo
+group: selectors
+caniuse: css-first-line
+status:
+  compute_from: css.selectors.first-line
+compat_features:
+  - css.selectors.first-line
+  - css.selectors.first-line.svg_text_element

features/first-line.yml.dist

@@ -0,0 +1,35 @@
+# Generated from: first-line.yml
+# Do not edit this file by hand. Edit the source file instead!
+
+status:
+  baseline: high
+  baseline_low_date: 2015-07-29
+  baseline_high_date: 2018-01-29
+  support:
+    chrome: "1"
+    chrome_android: "18"
+    edge: "12"
+    firefox: "1"
+    firefox_android: "4"
+    safari: "1"
+    safari_ios: "1"
+compat_features:
+  # ⬇️ Same status as overall feature ⬇️
+  # baseline: high
+  # baseline_low_date: 2015-07-29
+  # baseline_high_date: 2018-01-29
+  # support:
+  #   chrome: "1"
+  #   chrome_android: "18"
+  #   edge: "12"
+  #   firefox: "1"
+  #   firefox_android: "4"
+  #   safari: "1"
+  #   safari_ios: "1"
+  - css.selectors.first-line
+
+  # baseline: false
+  # support:
+  #   firefox: "124"
+  #   firefox_android: "124"
+  - css.selectors.first-line.svg_text_element

features/placeholder-shown.yml

@@ -0,0 +1,11 @@
+name: :placeholder-shown
+description: The `:placeholder-shown` CSS pseudo-element selects `<input>` and `<textarea>` elements when no value is set and the element's `placeholder` attribute is not empty. Not to be confused with `::placeholder`, which selects the placeholder text itself.
+spec: https://drafts.csswg.org/selectors-4/#placeholder
+caniuse: css-placeholder-shown
+group: selectors
+# Compute from entry to match caniuse
+status:
+  compute_from: css.selectors.placeholder-shown
+compat_features:
+  - css.selectors.placeholder-shown
+  - css.selectors.placeholder-shown.non_text_types

features/placeholder-shown.yml.dist

@@ -0,0 +1,42 @@
+# Generated from: placeholder-shown.yml
+# Do not edit this file by hand. Edit the source file instead!
+
+status:
+  baseline: high
+  baseline_low_date: 2020-01-15
+  baseline_high_date: 2022-07-15
+  support:
+    chrome: "47"
+    chrome_android: "47"
+    edge: "79"
+    firefox: "51"
+    firefox_android: "51"
+    safari: "9"
+    safari_ios: "9"
+compat_features:
+  # ⬇️ Same status as overall feature ⬇️
+  # baseline: high
+  # baseline_low_date: 2020-01-15
+  # baseline_high_date: 2022-07-15
+  # support:
+  #   chrome: "47"
+  #   chrome_android: "47"
+  #   edge: "79"
+  #   firefox: "51"
+  #   firefox_android: "51"
+  #   safari: "9"
+  #   safari_ios: "9"
+  - css.selectors.placeholder-shown
+
+  # baseline: high
+  # baseline_low_date: 2020-01-15
+  # baseline_high_date: 2022-07-15
+  # support:
+  #   chrome: "47"
+  #   chrome_android: "47"
+  #   edge: "79"
+  #   firefox: "59"
+  #   firefox_android: "59"
+  #   safari: "9"
+  #   safari_ios: "9"
+  - css.selectors.placeholder-shown.non_text_types

features/placeholder.yml

@@ -0,0 +1,8 @@
+name: ::placeholder
+description: The `::placeholder` CSS pseudo-element selects help text in `<input>` and `<textarea>` elements when no value is set.
+spec: https://drafts.csswg.org/css-pseudo-4/#placeholder-pseudo
+caniuse: css-placeholder
+group: selectors
+# TODO: create some kind of "input placeholders" feature when https://github.com/web-platform-dx/web-features/issues/971 is resolved, combining placeholder selectors and the element attr
+compat_features:
+  - css.selectors.placeholder

features/placeholder.yml.dist

@@ -0,0 +1,17 @@
+# Generated from: placeholder.yml
+# Do not edit this file by hand. Edit the source file instead!
+
+status:
+  baseline: high
+  baseline_low_date: 2020-01-15
+  baseline_high_date: 2022-07-15
+  support:
+    chrome: "57"
+    chrome_android: "57"
+    edge: "79"
+    firefox: "51"
+    firefox_android: "51"
+    safari: "10.1"
+    safari_ios: "10.3"
+compat_features:
+  - css.selectors.placeholder

features/selection.yml

@@ -0,0 +1,7 @@
+name: ::selection
+description: The `::selection` CSS pseudo-element selects text a user has highlighted.
+spec: https://drafts.csswg.org/css-pseudo-4/#selectordef-selection
+caniuse: css-selection
+group: selectors
+compat_features:
+  - css.selectors.selection

features/selection.yml.dist

@@ -0,0 +1,14 @@
+# Generated from: selection.yml
+# Do not edit this file by hand. Edit the source file instead!
+
+status:
+  baseline: false
+  support:
+    chrome: "1"
+    chrome_android: "18"
+    edge: "12"
+    firefox: "62"
+    firefox_android: "62"
+    safari: "1.1"
+compat_features:
+  - css.selectors.selection

features/text-decoration-selection.yml

@@ -0,0 +1,6 @@
+name: text-decoration in ::selection
+description: The `text-decoration` CSS property in a `::selection` rule sets the underline and other text decoration styles on the text a user has highlighted.
+spec: https://drafts.csswg.org/css-pseudo-4/#highlight-styling
+group: selectors
+compat_features:
+  - css.selectors.selection.text-decoration

features/text-decoration-selection.yml.dist

@@ -0,0 +1,11 @@
+# Generated from: text-decoration-selection.yml
+# Do not edit this file by hand. Edit the source file instead!
+
+status:
+  baseline: false
+  support:
+    chrome: "105"
+    chrome_android: "105"
+    edge: "105"
+compat_features:
+  - css.selectors.selection.text-decoration