@@ -1368,6 +1368,9 @@ Tree-Abiding Pseudo-elements</h2>
1368
1368
They <a lt="inheritance">inherit</a> any inheritable properties from their <a>originating element</a> ;
1369
1369
non-inheritable properties take their <a>initial values</a> as usual.
1370
1370
[[CSS-CASCADE-4]]
1371
+ A subset of these are the <dfn>fully styleable pseudo-elements</dfn> ;
1372
+ all properties that apply to a real element
1373
+ also apply to a [=fully styleable pseudo-element=] .
1371
1374
1372
1375
<wpt>
1373
1376
parsing/tree-abiding-pseudo-elements.html
@@ -1398,7 +1401,7 @@ Generated Content Pseudo-elements: ''::before'' and ''::after''</h3>
1398
1401
</wpt>
1399
1402
1400
1403
Both ''::before'' and ''::after''
1401
- are [=part-like pseudo-elements=] ;
1404
+ are [=fully styleable pseudo-elements=] :
1402
1405
there is no restriction on what properties apply to them.
1403
1406
1404
1407
<div class="example">
@@ -1578,51 +1581,47 @@ Placeholder Input: the ''::placeholder'' pseudo-element</h3>
1578
1581
It's not clear how this should work, but it may be worth doing.
1579
1582
See <a href="https://github.com/w3c/csswg-drafts/issues/2517">Issue 2417</a> .
1580
1583
1581
- <h2 id=partlike >
1582
- Part-Like Pseudo-Elements</h2>
1584
+ <h2 id="element-like" oldids=part-like >
1585
+ Element-backed Pseudo-Elements</h2>
1583
1586
1584
- A subset of [=tree-abiding pseudo-elements=] ,
1585
- the <dfn export lt="part-like|part-like pseudo-element">part-like pseudo-elements</dfn> ,
1586
- have slightly stronger requirements:
1587
- they act as if they have a well-defined location in the document tree.
1588
- This enables them to interact with some other platform features
1587
+ The <dfn export lt="element-backed|element-backed pseudo-element">element-backed pseudo-elements</dfn> ,
1588
+ interact with most CSS and other platform features
1589
1589
as if they were real elements
1590
- (and, in fact, they often <em> are</em> real elements,
1591
- such as in the case of ''::part()'' ,
1592
- which simply aren't accessible in the current tree).
1593
-
1594
- [=Part-like pseudo-elements=] inherit from their [=originating element=] by default,
1595
- like a standard [=tree-abiding pseudo- element=] ,
1596
- but can declare that they inherit from another element instead
1597
- (possibly not accessible) .
1590
+ (and, in fact, often <em> are</em> real elements
1591
+ that are not otherwise selectable).
1592
+
1593
+ Unless otherwise specified,
1594
+ they are fully styleable
1595
+ and inherit from their [=originating element=] ,
1596
+ just like standard [=tree-abiding pseudo-elements=] ;
1597
+ but they can be defined to inherit from another element instead .
1598
1598
(For example, ''::part()'' inherits from
1599
1599
the parent of the element it represents in the shadow tree.)
1600
1600
1601
- All pseudo-classes and pseudo-elements
1602
- are syntactically allowed after a [=part-like pseudo-element=] ,
1603
- such as ''x-button::part(label):hover''
1604
- or ''x-button::part(label)::before'' ,
1601
+ All [=pseudo-classes=] and [=pseudo-elements=]
1602
+ are syntactically allowed after an [=element-backed pseudo-element=]
1603
+ (such as ''x-button::part(label):hover''
1604
+ or ''x-button::part(label)::before'' ),
1605
+ just as if the pseudo-element were a [=type selector=] ;
1605
1606
but some are disallowed from matching:
1606
1607
1607
1608
* The [=structural pseudo-classes=] ,
1608
1609
'':has()'' pseudo-class,
1609
1610
'':scope'' pseudo-class,
1610
1611
and '':host'' /'':host()'' /'':host-context()'' pseudo-classes
1611
1612
never match.
1612
- * ''::part()'' never matches. (Other [=part-like pseudo-elements=] can, however.)
1613
+ * ''::part()'' never matches. (Other [=element-backed pseudo-elements=] can, however.)
1613
1614
1614
- A [=part-like pseudo-element=] can define itself as representing a real element
1615
- (possibly not accessible in the current tree).
1616
- If it does so, all pseudo-classes and pseudo-elements match according to that element,
1617
- if not disallowed by the previous restrictions.
1615
+ An [=element-backed pseudo-element=] can define itself as representing a real element
1616
+ (possibly one not accessible in the current tree).
1617
+ If it does so,
1618
+ all pseudo-classes and pseudo-elements not otherwise disallowed (see above)
1619
+ match as they would on that real element.
1618
1620
If it does not do so,
1619
- it must define which pseudo-classes it matches and when
1620
- (besides the pseudo-classes defined to work on all pseudo-elements,
1621
- or all [=tree-abiding pseudo-elements=] ).
1622
-
1623
- Unless otherwise specified,
1624
- any CSS property that applies to elements
1625
- applies to [=part-like pseudo-elements=] .
1621
+ it must define which pseudo-classes it matches and when;
1622
+ however, unless otherwise specified,
1623
+ any pseudo-classes allowed on [=tree-abiding pseudo-elements=]
1624
+ are always allowed on [=element-backed pseudo-elements=] .
1626
1625
1627
1626
1628
1627
<h3 id="file-selector-button-pseudo">
@@ -1632,7 +1631,7 @@ File Selector Button: the ''::file-selector-button'' pseudo-element</h3>
1632
1631
targets the ''<button>''
1633
1632
inside an ''<input>'' element with <code> type=file</code> ,
1634
1633
if the UA renders such a button.
1635
- It is a [=part-like pseudo-element=] .
1634
+ It is an [=element-backed pseudo-element=] .
1636
1635
1637
1636
<wpt>
1638
1637
file-selector-button-001.html
@@ -1659,7 +1658,7 @@ Expandable contents of details element: the ''::details-content'' pseudo-element
1659
1658
The <dfn>::details-content</dfn> pseudo-element targets
1660
1659
the additional information in a a <{details}> element
1661
1660
that can be expanded or collapsed.
1662
- It is a [=part-like pseudo-element=] .
1661
+ It is an [=element-backed pseudo-element=] .
1663
1662
1664
1663
<wpt title="details element">
1665
1664
@@ -1689,7 +1688,7 @@ Styling form control pickers: the ''::picker()'' pseudo-element</h3>
1689
1688
1690
1689
The <dfn>::picker()</dfn> pseudo-element targets the popup picker of form
1691
1690
control elements which have popup pickers, such as the <{select}> element. It
1692
- is a [=part-like pseudo-element=] .
1691
+ is an [=element-backed pseudo-element=] .
1693
1692
1694
1693
<pre class=prod>
1695
1694
::picker() = ::picker( <<ident>> + )
@@ -1704,7 +1703,7 @@ Styling form control pickers: the ''::picker()'' pseudo-element</h3>
1704
1703
<a>originating element</a> . For example, the <a>unique picker name</a> for
1705
1704
the <{select}> element is "select".
1706
1705
1707
- Since it is a [=part-like pseudo-element=] , There is no restriction on which
1706
+ Since it is an [=element-backed pseudo-element=] , There is no restriction on which
1708
1707
properties apply to the ''::picker()'' pseudo-element.
1709
1708
1710
1709
In order for the ''::picker()'' pseudo-element to be rendered, it and its
@@ -1924,16 +1923,15 @@ Changes</h2>
1924
1923
1925
1924
<ul>
1926
1925
<!-- to 30 Aug 2024 -->
1927
- <li> Added ::details-content pseudo-element (<a href="https://github.com/w3c/csswg-drafts/pull/10379">Issue 10379</a> ) </li>
1928
- <li> Defined "part-like pseudo-element" (<a href="https://github.com/w3c/csswg-drafts/pull/10199">Issue 10199</a> , <a href="https://github.com/w3c/csswg-drafts/issues/10083">Issue 10083</a> ) </li>
1926
+ <li> Defined [=element-backed pseudo-element=] .
1927
+ (<a href="https://github.com/w3c/csswg-drafts/pull/10199">Issue 10199</a> , <a href="https://github.com/w3c/csswg-drafts/issues/10083">Issue 10083</a> )
1928
+ <li> Added ''::details-content'' pseudo-element
1929
+ (<a href="https://github.com/w3c/csswg-drafts/pull/10379">Issue 10379</a> )
1929
1930
<li> Clarified that the inherited value of 'color' is ''currentColor'' , not the [=initial value=] .
1930
- </li>
1931
1931
<li> Clarified that a custom property may be defined and/or used inside a highlight pseudo-element.
1932
- </li>
1933
1932
<li> Defined the behavior when custom property values are not found in the
1934
1933
highlight cascade; they are taken from the root.
1935
1934
(<a href="https://github.com/w3c/csswg-drafts/issues/6641">Issue 6641</a> )
1936
- </li>
1937
1935
</ul>
1938
1936
1939
1937
0 commit comments