@@ -542,28 +542,38 @@ Structure and Terminology</h3>
542542 A <dfn id=pseudo-compound>pseudo-compound selector</dfn>
543543 is a [=pseudo-element=] selector,
544544 optionally followed by additional [=pseudo-class=] selectors,
545+ and optionally preceded by a [=compound selector=]
546+ or another [=pseudo-compound selector=] ,
545547 without any [=combinators=] .
546548 (A <a>pseudo-compound selector</a> is represented by <<pseudo-compound-selector>>
547549 in the selectors <a href="#grammar">grammar</a> .)
548550 A [=pseudo-element=] [=matches=] a [=pseudo-compound selector=]
549551 when it has the specified pseudo-element name,
550552 matches the additional conditions represented by any [=pseudo-classes=] ,
551553 and has an [=originating element=]
552- represented by the adjacent preceding [=compound selector=] .
553- If there is no adjacent preceding [=compound selector=] ,
554+ represented by the adjacent preceding selector.
555+ If there is no adjacent preceding selector,
554556 the [=universal selector=] is assumed.
555557 (For example, ''.foo ::before''
556558 is equivalent to ''.foo *::before'' ,
557559 and distinct from ''.foo::before'' .)
558560
559561 <div class=example>
560- For example, in ''.foo::before:hover'' ,
561- the ''.foo'' is a [=compound selector=] ,
562- while the ''::before:hover'' is a [=pseudo-compound selector=] .
563- However, in ''.foo::before::marker'' ,
564- ''::before'' and ''::marker'' are separate [=pseudo-compound selectors=] .
562+ For example, in ''.foo::before:hover'' ,
563+ the ''.foo'' is a [=compound selector=] ,
564+ while the ''::before:hover'' is a [=pseudo-compound selector=] .
565+ However, in ''.foo::before::marker'' ,
566+ ''::before'' and ''::marker'' are separate [=pseudo-compound selectors=] .
565567 </div>
566568
569+ Note: A [=pseudo-compound selector=] <strong> is not</strong>
570+ a [=compound selector=] ,
571+ and can't be used in places that expect a [=compound selector=] only.
572+ [=Pseudo-compound selectors=] act as if they carry a [=combinator=] with themselves,
573+ expressing their relationship with their [=originating element=] ,
574+ just as the ''>'' combinator
575+ expresses a relationship with a parent element.
576+
567577 A <dfn export for=selector>combinator</dfn>
568578 is a condition of relationship between two elements
569579 represented by the <a>compound selectors</a> on either side.
@@ -576,27 +586,36 @@ Structure and Terminology</h3>
576586 when the condition of relationship between these elements is true.
577587
578588 A <dfn id="complex" export>complex selector</dfn> is
579- a sequence of one or more <a>compound selectors</a> and/or [=pseudo-compound selectors=]
580- separated by <a>combinators</a> .
589+ a sequence of one or more <a>compound selectors</a>
590+ and/or [=pseudo-compound selectors=] ,
591+ with [=compound selectors=] separated by <a>combinators</a> .
581592 It represents a set of simultaneous conditions
582593 on a set of elements in the particular relationships
583594 described by its <a>combinators</a> .
584595 (Complex selectors are represented by <<complex-selector>>
585596 in the selectors <a href="#grammar">grammar</a> .)
586- A given element is said to <a>match</a> a <a>complex selector</a>
587- when there exists a list of elements,
588- each matching a corresponding <a>compound selector</a> in the <a>complex selector</a> ,
589- with each pair of elements consecutive in the list matching
590- the <a>combinator</a> between their corresponding <a>compound selectors</a> ,
591- and with the last element being the given element.
592-
593- Note: Thus, a selector consisting of a single <a>compound selector</a>
594- matches any element satisfying the requirements
595- of its constituent <a>simple selectors</a> .
596- Prepending another <a>compound selector</a> and a <a>combinator</a>
597- to a sequence imposes additional matching constraints,
598- such that the <a>subjects</a> of a <a>complex selector</a> are always
599- a subset of the elements represented by its last <a>compound selector</a> .
597+ A given element or pseudo-element
598+ is said to <a>match</a> a <a>complex selector</a>
599+ when it matches the final [=compound selector|compound=] /[=pseudo-compound selector=] in the sequence,
600+ and every preceding unit of the sequence also [=matches=]
601+ an element or [=pseudo-element=] ,
602+ with the correct relationship between consecutive units
603+ as expressed by the combinators separating them
604+ (or, for [=pseudo-compound selectors=] ,
605+ the correct [=originating element=] relationship).
606+
607+ <div class=example>
608+ For example, ''.foo.bar'' matches an element
609+ with both "foo" and "bar" classes.
610+
611+ ''.ancestor > .foo.bar'' matches a subset of those elements:
612+ only those whose parent element
613+ (as indicated by the ''>'' combinator)
614+ has the "ancestor" class.
615+
616+ ''.foo.bar::before'' matches a ''::before'' pseudo-element,
617+ whose [=originating element=] matches ''.foo.bar'' .
618+ </div>
600619
601620 A <dfn export lt="list of simple selectors|list of compound selectors|list of complex selectors">list of simple/compound/complex selectors</dfn>
602621 is a comma-separated list of
0 commit comments