W3C home > Mailing lists > Public > www-style@w3.org > December 2003

Re: CSS3 Selector Limitations and Suggestions

From: Lachlan Hunt <lhunt07@netscape.net>
Date: Tue, 09 Dec 2003 01:05:20 +1100
Message-ID: <3FD48520.5010508@netscape.net>
To: www-style@w3.org

ernestcline@mindspring.com wrote:

>> - Descendant Pseudo Classes -
>>
>> * :nth-descendant(an+b)
>> <snip/>
>
> This can be done using the :rpt() pseudo-class you give later,
>
> E F:nth-descendant(an+b)
> is equivalent to:
> E > *:rpt(an+b-1) > F

Yes, but I wanted a meaningful shorthand method of doing that.  A 
repeating syntax would be shorthand, but because it can't be used in 
place of all of these pseudo elements, I included :nth-decendant for 
completeness and consistency with the existing -child and -of-type classes.

If you think about it,
E > F:nth-child(an+b)
is (almost) equivalent to:
E > *:first-child + * + ... + F
or with a repeating syntax like:
E > *:first-child + *:rpt(an+b-1) + F
but :nth-child provides a meaningful shorthand.

>> * :nth-last-descendant(an+b)
>> <snip/>
>
> Can you give a use case of why one would want this selector?
> You gave an example of how it would be used, but not why.

  The :last-, :nth-last-descendant and equivalent -of-type classes 
provide a kind of way to work up through the document tree from the 
bottom to top (or from the leaves to the root), whereas current CSS can 
only work down (with the exception of the :last- and nth-last-child and 
-of-type classes)..

Example:
  When an author or CSS artist wants to apply style to elements that 
have only a set number of, or no descendants in the docuemnt tree.
For example:
(This may be a bad example of using <em> but it's the simplest example I 
can think of to illustrate the possilbe use of this, and similar pseudo 
elements.)

<p>this is some
    <em>paragraph</em> text containing some <!-- L1 -->
    <em><em>nested</em> elements</em>.<!-- L2 -->
    <l>CSS will apply <em>some very <em>fancy
        <em>style</em></em></em> to it.</l> <!-- L3 -->
</p>

With this CSS applied:

em { color: red; }
em:nth-last-descendant(2) { color: green; }
em:last-descendant { color: blue; }

Will render like this:
(Using <em-colour> to indicate the colour applied)

<p>this is some
    <em-blue>paragraph</em-blue> text containing some
    <em-green><em-blue>nested</em-blue> elements</em-green>.
    <l>CSS will apply <em-red>some very <em-green>fancy
        <em-blue>style</em-blue></em-green></em-red> to it.</l>
</p>

  I'm quite sure that any other variation using existing selectors (that 
is not extremely long or involves many selectors) will change the 
styling, or will not be as effective if the document changes.

>> - Descendant of Type Pseudo Classes -
>>
>> * :nth-descendant-of-type(an+b)
>> <snip/>
>
> This can also be done using the :rpt() pseudo-class you give later,
>
> E F:nth-descendant(an+b)
> is equivalent to:
> E *:rpt(an+b)

Not quite, because that would count additional nested tags of other 
types, whereas the -of-type pseudo class only count elements of that 
type.  It's just like the difference between :nth-child and nth-of-type.

  This also raises another question.  Should nth-of-type be renamed to 
nth-child-of-type?  Since both -child and -of-type classes only apply to 
children of an element, and also for consistency with future classes 
like the proposed -descendant classes or anything else that may be 
thought of with similarities to them.

>> * :nth-last-descendant-of-type(an+b)
>> <snip/>
>
> Again, can you give a use case of why one would want this selector?
> You gave an example of how it would be used, but not why.

Yes, Using the previous example by nesting some extra inline elements of 
any kind within the <em> elements.  Then modify the CSS to use the 
-of-type() classes and the result should be the same.


> A repeat selector mechanism would make things easier,
> altho I'm not at all happy with the proposed syntax.

Yes, the syntax could be improved, but it's more the concept that I was 
interested in.  If someone can think of a better syntax, that would be 
great!

CYA
...Lachy
Received on Monday, 8 December 2003 09:06:28 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:25 GMT