@@ -0,0 +1,70 @@
+
+import CSSPseudoElement from './CSSPseudoElement.js'
+import { elements as definitions } from '../values/pseudos.js'
+import { isFailure } from '../utils/value.js'
+import { parseGrammar } from '../parse/parser.js'
+import { serializeComponentValue } from '../serialize.js'
+
+/**
+ * @see {@link https://drafts.csswg.org/css-pseudo-4/#csspseudoelement}
+ */
+export default class CSSPseudoElementImpl {
+
+    /**
+     * @param {Window} globalObject
+     * @param {*[]} args
+     */
+    constructor(globalObject, { element, parent, selectorText, type }) {
+        this._globalObject = globalObject
+        this.element = element
+        this.parent = parent
+        this.selectorText = selectorText
+        this.type = type
+    }
+
+    /**
+     * @returns {Document}
+     */
+    get ownerDocument() {
+        return this.element.ownerDocument
+    }
+
+    /**
+     * @param {object} options
+     * @returns {Document|ShadowRoot}
+     */
+    getRootNode(options) {
+        return this.element.getRootNode(options)
+    }
+
+    /**
+     * @param {string} type
+     * @returns {CSSPseudoElementImpl|null}
+     * @see {@link https://drafts.csswg.org/css-pseudo-4/#dom-csspseudoelement-pseudo}
+     */
+    pseudo(type) {
+
+        const selectorText = parseGrammar(type, '<pseudo-element-selector>')
+
+        if (isFailure(selectorText)) {
+            return null
+        }
+
+        const [, [, { value, name }]] = selectorText
+
+        type = name ?? value
+
+        if (!definitions[this.type.slice(2)].elements?.includes(type)) {
+            return null
+        }
+
+        const properties = {
+            element: this.element,
+            parent: this,
+            selectorText: serializeComponentValue(selectorText),
+            type: `::${type}`,
+        }
+
+        return CSSPseudoElement.createImpl(this._globalObject, properties)
+    }
+}
@@ -0,0 +1,10 @@
+
+// https://drafts.csswg.org/css-pseudo-4/#csspseudoelement
+[Exposed=Window]
+interface CSSPseudoElement {
+    readonly attribute CSSOMString type;
+    readonly attribute Element element;
+    readonly attribute (Element or CSSPseudoElement) parent;
+    readonly attribute CSSOMString selectorText;
+    CSSPseudoElement? pseudo(CSSOMString type);
+};
@@ -4,6 +4,7 @@ import { UPDATE_READONLY_STYLE_DECLARATION_ERROR, create as error } from '../err
 import { getDeclarationDefinition, getDeclarationName, parseDeclarations, parseDestructuredDeclaration } from '../parse/parser.js'
 import { isFailure, isOmitted } from '../utils/value.js'
 import { serializeDeclarationBlock, serializeValue } from '../serialize.js'
+import CSSPSeudoElement from './CSSPseudoElement.js'
 import expandShorthandDeclaration from '../parse/shorthand.js'
 import { getResolvedValue } from '../resolve.js'
 import { isOfType } from '../utils/dom/element.js'
@@ -14,10 +15,13 @@ import shorthands from '../properties/shorthands.js'
 import { toLowerCase } from '../utils/string.js'
 
 /**
- * @param {Element} element
+ * @param {CSSPseudoElementImpl|Element} element
  * @returns {boolean}
  */
 function hasResolvedStyle(element) {
+    if (CSSPSeudoElement.isImpl(element)) {
+        return hasResolvedStyle(element.element)
+    }
     if (!element.isConnected) {
         return false
     }
 
@@ -30,6 +30,7 @@ export { default as CSSPageRule } from './CSSPageRule.js'
 export { default as CSSPositionTryDescriptors } from './CSSPositionTryDescriptors.js'
 export { default as CSSPositionTryRule } from './CSSPositionTryRule.js'
 export { default as CSSPropertyRule } from './CSSPropertyRule.js'
+export { default as CSSPseudoElement } from './CSSPseudoElement.js'
 export { default as CSSRule } from './CSSRule.js'
 export { default as CSSRuleList } from './CSSRuleList.js'
 export { default as CSSScopeRule } from './CSSScopeRule.js'
 
@@ -22,7 +22,9 @@ import { getElementLanguageTag, matchesLanguageRange, parseLanguageTag } from '.
 import { isDelimiter, isOmitted } from '../utils/value.js'
 import { isHTMLDocument, isShadowRoot, traverse } from '../utils/dom/tree.js'
 import { serializeComponentValue, serializeIdentifier } from '../serialize.js'
+import CSSPseudoElement from '../cssom/CSSPseudoElement.js'
 import getDirectionality from '../utils/dom/directionality.js'
+import { list } from '../values/value.js'
 import { parseGrammar } from '../parse/parser.js'
 import { toLowerCase } from '../utils/string.js'
 
@@ -1186,19 +1188,90 @@ function matchPseudoClassSelector(element, { name, value }, context, options) {
 }
 
 /**
- * @param {ElementImpl} element
+ * @param {CSSPseudoElementImpl} element
  * @param {*[]} selector
  * @param {object} context
  * @param {object} options
  * @returns {boolean}
  */
-function matchPseudoCompoundSelectors(element, selector, context, { pseudos }) {
-    return selector.every(selector => {
-        const [pseudoElement, pseudoClasses] = selector
-        const type = `::${pseudoElement.types[0] === '<function>' ?  `${pseudoElement.name}()` : pseudoElement.value}`
-        const pseudo = pseudos.includes(type) && element.pseudo(type)
-        return pseudo && pseudoClasses.length === 0
-    })
+function matchPseudoCompoundSelector(element, [pseudoElement, pseudoClasses], context, options) {
+    return element.selectorText === serializeComponentValue(pseudoElement)
+        && pseudoClasses.every(selector => matchPseudoClassSelector(element, selector, context, options))
+}
+
+/**
+ * @param {CSSPseudoElementImpl|ElementImpl} element
+ * @param {*[]} selector
+ * @param {object} context
+ * @param {object} options
+ * @returns {boolean}
+ */
+function matchPseudoCompoundSelectors(element, selector, context, options) {
+    for (let index = selector.length - 1; -1 < index; index--) {
+        if (!CSSPseudoElement.isImpl(element)) {
+            return false
+        }
+        if (!matchPseudoCompoundSelector(element, selector[index], context, options)) {
+            return false
+        }
+        element = element.parent
+    }
+    return true
+}
+
+/**
+ * @param {CSSPseudoElementImpl} element
+ * @param {*[]} selector
+ * @param {object} context
+ * @param {object} options
+ * @returns {boolean}
+ */
+function matchPseudoElementAgainstComplexSelector(element, selector, context, options) {
+
+    let [head, tail] = selector
+    let compound
+    let pseudoCompounds
+
+    // Resolve and replace <pseudo-compound-selector>* in the subject with empty list
+    if (tail.length === 0) {
+        [compound, pseudoCompounds] = head
+        const unit = list([compound, list([], '')], '', ['<complex-selector-unit>'])
+        selector = [unit, tail]
+    } else {
+        let combinator
+        tail = [...tail];
+        [combinator, [compound, pseudoCompounds]] = tail.pop()
+        const unit = list([compound, list([], '')], '', ['<complex-selector-unit>'])
+        tail.push(list([combinator, unit], ''))
+        selector = [head, list(tail, '')]
+    }
+    selector = list(selector, '', ['<complex-selector>'])
+
+    return matchPseudoCompoundSelectors(element, pseudoCompounds, context, options)
+        && matchComplexSelector(element.element, selector, context, options)
+}
+
+/**
+ * @param {CSSPseudoElementImpl} element
+ * @param {*[]} selectors
+ * @param {object} [context]
+ * @param {object} [options]
+ * @returns {*[]|null}
+ * @see {@link https://drafts.csswg.org/selectors-4/#match-against-pseudo-element}
+ */
+function matchPseudoElementAgainstSelectors(element, selectors, context, options) {
+
+    if (selectors.types.includes('<complex-real-selector-list>')) {
+        return false
+    }
+
+    context = createContext(element.element, context)
+    options = createOptions(context, options)
+
+    if (options.all) {
+        return selectors.every(selector => matchPseudoElementAgainstComplexSelector(element, selector, context, options))
+    }
+    return selectors.find(selector => matchPseudoElementAgainstComplexSelector(element, selector, context, options)) ?? null
 }
 
 /**
@@ -1355,6 +1428,10 @@ function matchCompoundSelector(element, selector, context, options) {
         return (isOmitted(compound) || matchCompoundSelector(element, compound, context, options))
             && matchPseudoCompoundSelectors(element, pseudos, context, options)
     }
+    // It can be omitted only when matching a pseudo-element
+    if (isOmitted(selector)) {
+        return true
+    }
     const [type, subclasses] = selector
     return matchTypeSelector(element, type, context)
         && matchSubclassSelector(element, subclasses, context, options)
@@ -1675,5 +1752,6 @@ function matchTreesAgainstSelectors(trees, selectors, context, options) {
 
 export {
     matchElementAgainstSelectors,
+    matchPseudoElementAgainstSelectors,
     matchTreesAgainstSelectors,
 }
@@ -8,14 +8,15 @@ import {
     CSSMediaRule,
     CSSNamespaceRule,
     CSSNestedDeclarations,
+    CSSPseudoElement,
     CSSScopeRule,
     CSSStyleRule,
     CSSSupportsRule,
 } from './cssom/index.js'
 import { delimiter, identifierToken, list, map, omitted } from './values/value.js'
 import { findAncestor, getParent } from './utils/dom/element.js'
 import { isDelimiter, isList, isOmitted } from './utils/value.js'
-import { matchElementAgainstSelectors, matchTreesAgainstSelectors } from './match/selector.js'
+import { matchElementAgainstSelectors, matchPseudoElementAgainstSelectors, matchTreesAgainstSelectors } from './match/selector.js'
 import { ampersand } from './values/defaults.js'
 import { getElementColorScheme } from './utils/color-scheme.js'
 import { implForWrapper } from './cssom/utils.js'
@@ -220,6 +221,17 @@ function getRuleDeclarations(property, element, rule, context) {
         const selectors = getAbsoluteSelectors(_selectors, context)
         const elements = matchTreesAgainstSelectors([context.root], selectors, context)
 
+        // Pseudo-elements cannot match nested rule selectors at the moment
+        if (CSSPseudoElement.isImpl(element)) {
+            if (matchPseudoElementAgainstSelectors(element, selectors, context)) {
+                const declaration = style._declarations.find(declaration => declaration.name === property)
+                if (declaration) {
+                    return [declaration]
+                }
+            }
+            return []
+        }
+
         if (0 < elements.length) {
             context = { ...context, selectors: [...context.selectors, selectors] }
             const declarations = []
@@ -316,7 +328,7 @@ function getDeclaredValues(property, element) {
         getStyleSheetListDeclarations(property, element, styleSheets, createContext(root, AUTHOR_ORIGIN)),
         getStyleSheetListDeclarations(property, element, adoptedStyleSheets, createContext(root, AUTHOR_ORIGIN)),
     ]
-    const declaration = implForWrapper(style)._declarations.find(declaration => declaration.name === property)
+    const declaration = implForWrapper(style)?._declarations.find(declaration => declaration.name === property)
     if (declaration) {
         declarations.push({ ...declaration, context: { attached: true, origin: AUTHOR_ORIGIN } })
     }
 
@@ -41,10 +41,11 @@ import { HTML_NAMESPACE, SVG_NAMESPACE, XLINK_NAMESPACE, XML_NAMESPACE } from '.
 import assert, { Assert, AssertionError } from 'node:assert/strict'
 import { createContext, parseGrammar } from '../lib/parse/parser.js'
 import { describe, test } from 'node:test'
+import { matchPseudoElementAgainstSelectors, matchTreesAgainstSelectors } from '../lib/match/selector.js'
+import { CSSPseudoElement } from '../lib/cssom/index.js'
 import { install } from '@cdoublev/css'
 import matchMediaQueryList from '../lib/match/media.js'
 import matchSupport from '../lib/match/support.js'
-import { matchTreesAgainstSelectors } from '../lib/match/selector.js'
 import { omitted } from '../lib/values/value.js'
 
 install()
@@ -662,6 +663,24 @@ describe('selector', () => {
         selections.forEach(([selector, expected, context, options]) =>
             assert.match(selector, expected, document, context, options))
     })
+    test('pseudo-element', () => {
+
+        const document = new HTMLDocument
+        const html = new HTMLHtmlElement({ ownerDocument: document, parentNode: document })
+        const highlight = CSSPseudoElement.createImpl(globalThis, {
+            element: html,
+            parent: html,
+            selectorText: '::highlight(identifier)',
+            type: '::highlight',
+        })
+
+        const selectors = ['::highlight(identifier)', 'html::highlight(identifier)']
+
+        selectors.forEach(selector => {
+            selector = parseGrammar(selector, '<selector-list>')
+            assert.equal(!!matchPseudoElementAgainstSelectors(highlight, selector), true)
+        })
+    })
 
     test('complex', () => {
 
 
@@ -0,0 +1,37 @@
+
+import { HTMLDivElement, HTMLDocument } from './dom.js'
+import { CSSPseudoElement } from '../lib/cssom/index.js'
+import assert from 'node:assert/strict'
+import { install } from '@cdoublev/css'
+import { test } from 'node:test'
+
+install()
+
+test('CSSPseudoElement', () => {
+
+    const document = new HTMLDocument
+    const element = new HTMLDivElement({ ownerDocument: document })
+    const properties = {
+        element,
+        parent: element,
+        selectorText: '::before',
+        type: '::before',
+    }
+    const before = CSSPseudoElement.create(globalThis, properties)
+
+    assert.equal(CSSPseudoElement.is(before), true)
+    assert.equal(before.element, element)
+    assert.equal(before.parent, element)
+    assert.equal(before.selectorText, '::before')
+    assert.equal(before.type, '::before')
+
+    assert.equal(before.pseudo('::after'), null)
+
+    const marker = before.pseudo('::marker')
+
+    assert.equal(CSSPseudoElement.is(marker), true)
+    assert.equal(marker.element, element)
+    assert.equal(marker.parent, before)
+    assert.equal(marker.selectorText, '::marker')
+    assert.equal(marker.type, '::marker')
+})
@@ -9,6 +9,7 @@ import {
     CSSMarginDescriptors,
     CSSPageDescriptors,
     CSSPositionTryDescriptors,
+    CSSPseudoElement,
     CSSStyleProperties,
     CSSStyleSheet,
 } from '../lib/cssom/index.js'
@@ -392,6 +393,22 @@ describe('CSSStyleDeclaration.setProperty(), CSSStyleDeclaration.getPropertyValu
         style.borderBlockStartColor = 'green'
         assert.equal(style.cssText, 'border-top-color: green; border-block-start-color: green;')
     })
+    it('resolves a value for a pseudo-element', () => {
+
+        const document = new HTMLDocument
+        const html = new HTMLHtmlElement({ ownerDocument: document, parentNode: document })
+        const body = new HTMLBodyElement({ ownerDocument: document, parentNode: html })
+        new HTMLStyleElement({ innerText: '::before { color: green }', ownerDocument: document, parentNode: body })
+        const before = CSSPseudoElement.createImpl(globalThis, {
+            element: body,
+            parent: body,
+            selectorText: '::before',
+            type: '::before',
+        })
+        const style = createResolvedStyle(before)
+
+        assert.equal(style.color, 'rgb(0, 128, 0)')
+    })
     it('resolves a value by collecting declarations in conditional rules', () => {
 
         const styleSheet = `