Re: New version of the Selectors module of CSS3

On Fri, 6 Oct 2000, Jonas Sicking wrote:
>>
>> http://www.w3.org/TR/css3-selectors/
> 
> Great draft! However I miss some things discussed/proposed in this list.
> Don't know if you've missed them so here goes : )
> 
> 1. :default pseudo-class. [...]

Sounds like a great addition! 


> 2. pseudo-class inversion. [...]
>
> So I propose that the "not-" prefix is removed from where it currently
> exists and is made generic instead so that it could be applied to any
> pseudoclass

Yes! I completely agree.

 
> 5. entities
> If I have a XML file containing unresolved entities it could be really
> useful to be able to style those. If I for example have an XML file system
> users I could do.
> 
> Email > &null; { color: red; content: 'missing'; font-weight: bold}

This sounds like one of those things that are Evil. Should there be any
difference between &something; and 'the string to which something
expands'? How are entities represented in the DOM?


> 3. nth-last-child(n)
> As much as there is need to select the second, third, or seventeenth element
> there is need to select the second last, third last and seventeenth last
> child/element of type.
> 
> 4. nth-child(3 to 10)
> ability to select a range of children would make the stylesheet more
> readable then doing
> :nth-child(3), :nth-child(4), :nth-child(5)... { color: gray }
>
> 6. every other child (this one is new : )
> It's very common to style long lists so that every other line has a
> different color in a long and wide table listing to make it easier to read.
> I would suggest some sort of pseudo-class which would allow me to select
> every n'th element [...]

Yes! I completely agree.

I proposed a comprehensive way of doing all of these. I have included the
text of my proposal below.


STRUCTURAL PSEUDO-CLASSES

I propose the following list of pseudo-classes. They are largely based on
the :nth-child and related pseudos in the current draft, but have been
made more useful, more generic, and more consistent with each other.

   :child(n,m) - matches an element that has n+xm-1 siblings before it
   in the document tree, for all x. (n>=1, m=0 or m>=n, x>=0). In
   other words, this matches the nth child of an element after all the
   children have been split into groups of m elements each. For
   example, this allows the selectors to address every other row in a
   table, and could be used, for example, to alternate the colour of
   paragraph text in a cycle of four.

     TR:child(1,2) /* address every odd row */
     TR:child(2,2) /* address every even row */

     /* Alternate paragraph colours: */
     P:child(1,4) { color: navy; }
     P:child(2,4) { color: green; }
     P:child(3,4) { color: maroon; }
     P:child(4,4) { color: purple; }

   When m=0, no repeating is used, so :child(5,0) matches only the
   fifth child.

   If n is negative, then start counting from the end of the element.
   For example,

     /* Alternate paragraph colours: */
     P:child(-1,4) { color: navy; }
     P:child(-2,4) { color: green; }
     P:child(-3,4) { color: maroon; }
     P:child(-4,4) { color: purple; }

   ...results in the same as the previous example, except that the
   last P of each block is guaranteed to be navy.


   :child-of-type(n,m) - matches an element that has n+xm-1 siblings
   with the same element name before it in the document tree, for all
   x. (n>=1, m=0 or m>=n, x>=0). In other words, this matches the nth
   child of that type after all the children of that type have been
   split into groups of m elements each. For example, this allows us
   to alternate the position of floated images:

     IMG:child-of-type(1,2) { float: right; }
     IMG:child-of-type(2,2) { float: left; }

   When m=0, no repeating is used, so :child-of-type(5,0) matches only
   the fifth child of that type.

   If n is negative, then start counting from the end of the element.
   For example,

     IMG:child-of-type(-1,2) { float: right; }
     IMG:child-of-type(-2,2) { float: left; }

   ...results in the same as the previous example, except that the
   last IMG of each block is guaranteed to be on the right. This, of
   course, can cause some startling effects on a page that is loading
   very slowly with incremental reflow, and so if this pseudo-class is
   used then the user agent may quite legitimately wait for the end of
   the element before laying it out.


   :children(a,b) - matches all elements that are the ath child, the
   bth child, or any child in between, of their parent. Negative
   numbers mean count from the end of the element. For example,
   :children(3,5) matches the 3rd, 4th and 5th children of every
   element.


   :children-of-type(a,b) - matches all elements of each type that are
   the ath child of that type, the bth child of that type, or any
   child of that type in between, of their parent. Negative numbers
   mean count from the end of the element. For example,
   TR:children-of-type(2,-1) means all rows apart from the first (and
   is equivalent to TR:not-first-child-of-type).


   :first-child - same as :child(1).

   :first-of-type - same as :child-of-type(1).

   :last-child - matches elements that have no later siblings. The
   same as :child(-1). The following will never match:
     *:last-child ~ * { }

   :last-of-type - matches elements that have no later siblings with
   the same element name. The same as :child-of-type(-1). The
   following will never match:
     X:last-of-type ~ X { }

   :only-child - matches an element that has no siblings. Same as
   :first-child:last-child or :child(1):child(-1).

   :only-of-type - matches an element that has no siblings with the
   same element name. Same as :first-of-type:last-of-type or
   :child-of-type(1):child-of-type(-1).

   :child(n) - directly equivalent to :child(n,0).

   :child(even) - directly equivalent to :child(1,2).

   :child(odd) - directly equivalent to :child(2,2).

   :child-of-type(n) - directly equivalent to :child-of-type(n,0).

   :child-of-type(even) - directly equivalent to :child-of-type(1,2).

   :child-of-type(odd) - directly equivalent to :child-of-type(2,2).


BTW, the reason I renamed :nth-child to :child is that :nth-child is
an ugly name according to David. While I agree, the naming is a
secondary issue IMHO, it is the functionality I am interested in.

-- 
Ian Hickson                                     )\     _. - ._.)       fL
Netscape, Standards Compliance QA              /. `- '  (  `--'
+1 650 937 6593                                `- , ) -  > ) \
irc.mozilla.org:Hixie _________________________  (.' \) (.' -' __________

Received on Thursday, 5 October 2000 21:08:17 UTC