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

Selector Readabiliitiy [WAS: Backwards compatibility of new selectors]

From: Andrew n marshall <amarshal@usc.edu>
Date: Thu, 4 Dec 1997 07:55:18 -0800
Message-ID: <01BD0089.FF25D170.amarshal@usc.edu>
To: "www-style@w3.org" <www-style@w3.org>

In an attempt to follow the previous thread, I took a second look at the 
section on selectors. I knew I had problems with is previously, but at the 
time I had only glossed over it.  This time I forced myself to struggle 
through it, and it was a struggle because it isn't very pretty.

As an interface designer, these are the primary problems I see:

The meaning of the '~' is overloaded. Alone, it means an immediate 
ancestor-descendant relationship. If contained within a pair of slashes it 
denotes an immediate sibling relationship.

The meaning of the '/' is overloaded. If the first slash is single (???) 
then the slash is a container for a sibling relationship. If it is double, 
is denotes a qualification of a selector (a role previously filled by the 
pseudo-classes; see below).

As a programmer, these are my concerns:

The '/' is a very poor choice for a container delimiter, making nesting of 
the two meanings impossible. For instance:
	DIV.sect / //H2/ ~ P /
While the spaces help a person determine the meaning (first paragraph 
following the header of a section), I can imagine a computer having a 
considerable amount of trouble with this. I found nothing in the CSS-1 or 
CSS-2 spec that prevents the usage of either '()' or '<>'. However, my 
preference is a single character prefix denoting "following sibling of the 
previous selector", such as '*', '+', or '!'.

Whitespace is poorly defined.  In CSS-1, a programmer could assume 
whitespace was a good delimiter for selectors, but in specification you 
give the following examples in section 6.6:
	/MATH ~ P/ {...} /* Two selectors, three whitespace delimited elements */
	/H1~H2/ {...} /* Two selectors, one whitespace delimited element */
	DIV ~ //P/ {...} /* Two selectors, three white space delimited words. */
I would like to see this cleaned up. I don't think it is unreasonable to 
treat the tilde as prefix meaning "immediate relationship", like so:
	/MATH ~P/ {...}
	/H1 ~H2/ {...}
	DIV ~//P/ {...}

On Wednesday, December 03, 1997 2:57 PM, Liam Quinn 
[SMTP:liam@htmlhelp.com] wrote:
> I don't feel that this one bug should be a concern; CSS-2 should use the
> most natural notation for authors.

Definitely.  Douglas Rand's complaints are unfounded, not only for the lack 
of evidence that there is a compatibility problem, but also amount of 
effort he is requiring out of the standards group (essentially bug testing 
all existing browsers to a standard they weren't written to).  The CSS-1 
spec was enough warning (although I would hardly say it was clearly 

On Tuesday, December 02, 1997 1:45 PM, Liam Quinn [SMTP:liam@htmlhelp.com] 
> If you don't add funky characters you don't have backwards compatibility
> with CSS1-compliant browsers.

I strongly disagree.  CSS-1 developed several reasonable notations for 
certain types of selection that can more gracefully, and readably, be 
extended.  For example , pseudo-elements and pseudo-classes were already 
used to solve the first-line and first-letter problems. Why weren't they 
used for first-child and last-child?  Compare the following:

CSS-2 (I think):
	DIV.sect //P/ {...}
	DIV.sect /P// {...} /* not official syntax, but suggested in a comment at 
the end of 6.6 */
Mine (tweaked from Douglas Rand's original proposal):
	DIV.sect P:first-child {...}
	DIV.sect P:last-child {...}

I think the second example is considerably more readable (and therefore 
writable).  I would also like to see a similar 'first-of-type' (needs a 
better name) to cover the 'P' in the following case:
	<DIV class="sect">
	   <H2>Title for section</H2>
	   <P>Choose this paragraph</P>
	   <P>Not this one</P>
This idea does present the problem of how to specify the first-letter or 
first-line of the first-child (such as a drop-cap). The obvious solution 
screams for multiple pseudo-classes and pseudo-elements per selector.

If all of these proposals are used (with '!' as the sibling prefix), the 
results of the above selected examples from 6.6 would turn out as:
	MATH !~P {...} /* or MATH ~!P; order shouldn't matter here */
	H1 !~H2 {...}
	DIV ~P:first-child {...}

As always, I would love to hear you comments.

Andrew n marshall
  student - artist - programmer
      "Everyone a mentor,  Everyone a pupil"
Received on Thursday, 4 December 1997 10:51:09 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:26:45 UTC