Repository: tailwindlabs/tailwindcss (TypeScript)

Issue:
Unexpected behavior of pseudo-elements such as marker
**What version of Tailwind CSS are you using?**

For example: v3.3.2

**What build tool (or framework if it abstracts the build tool) are you using?**

vite 4.3.3, vue 3.2.47, postcss 8.4.23

**What version of Node.js are you using?**

v20.0.0

**What browser are you using?**

Chrome

**What operating system are you using?**

macOS

**Reproduction URL**

As v3.3.2 is currently unavailable in Tailwind Play, this is the Insiders version.
[https://play.tailwindcss.com/3SbW3c1AhG](https://play.tailwindcss.com/3SbW3c1AhG)

<img width="50" src="https://user-images.githubusercontent.com/36815907/234824052-0245f5dc-5045-4a89-b241-a21edf9218e5.png">

In v3.3.1, it works as expected.
[https://play.tailwindcss.com/1nJxOORQv7](https://play.tailwindcss.com/1nJxOORQv7)

<img width="50" src="https://user-images.githubusercontent.com/36815907/234824207-9d53f56f-edb1-4898-816d-162b81f4fc1a.png">

**Describe your issue**

In v3.3.2, some behaviors of pseudo-elements are not as expected, for example, the marker color cannot be changed correctly, while this works correctly in v3.3.1.

```html
<div class="[&>li]:marker:text-red-500">
  <li>A</li>
  <li>B</li>
  <li>C</li>
</div>

<div class="prose prose-li:marker:text-purple-500">
  <li>D</li>
  <li>E</li>
  <li>F</li>
</div>
```


Hints:
Hey, thank you for this bug report! 🙏

If you swap the variants around then it behaves as expected: https://play.tailwindcss.com/u1trU3XrlL however I do think we regressed on this. 

---

@thecrypticace Pinging you because I know you worked on this recently to fix other bugs. We can also pair on this later today to see what's going on if you want. 

Patch:
diff --git a/src/util/pseudoElements.js b/src/util/pseudoElements.js
--- a/src/util/pseudoElements.js
+++ b/src/util/pseudoElements.js
@@ -26,17 +26,17 @@
 /** @type {Record<string, PseudoProperty[]>} */
 let elementProperties = {
   '::after': ['terminal', 'jumpable'],
-  '::backdrop': ['terminal'],
+  '::backdrop': ['terminal', 'jumpable'],
   '::before': ['terminal', 'jumpable'],
   '::cue': ['terminal'],
   '::cue-region': ['terminal'],
   '::first-letter': ['terminal', 'jumpable'],
   '::first-line': ['terminal', 'jumpable'],
   '::grammar-error': ['terminal'],
-  '::marker': ['terminal'],
+  '::marker': ['terminal', 'jumpable'],
   '::part': ['terminal', 'actionable'],
-  '::placeholder': ['terminal'],
-  '::selection': ['terminal'],
+  '::placeholder': ['terminal', 'jumpable'],
+  '::selection': ['terminal', 'jumpable'],
   '::slotted': ['terminal'],
   '::spelling-error': ['terminal'],
   '::target-text': ['terminal'],


Test patch:
diff --git a/tests/format-variant-selector.test.js b/tests/format-variant-selector.test.js
--- a/tests/format-variant-selector.test.js
+++ b/tests/format-variant-selector.test.js
@@ -352,6 +352,10 @@ crosscheck(() => {
       ${'#app :is(:is(.dark &)::before)'}                      | ${'#app :is(:is(.dark &))::before'}
       ${'#app :is(.foo::file-selector-button)'}                | ${'#app :is(.foo)::file-selector-button'}
       ${'#app :is(.foo::-webkit-progress-bar)'}                | ${'#app :is(.foo)::-webkit-progress-bar'}
+      ${'.parent::marker li'}                                  | ${'.parent li::marker'}
+      ${'.parent::selection li'}                               | ${'.parent li::selection'}
+      ${'.parent::placeholder input'}                          | ${'.parent input::placeholder'}
+      ${'.parent::backdrop dialog'}                            | ${'.parent dialog::backdrop'}
     `('should translate "$before" into "$after"', ({ before, after }) => {
       let result = finalizeSelector('.a', [{ format: before, isArbitraryVariant: false }], {
         candidate: 'a',