W3C home > Mailing lists > Public > www-style@w3.org > September 1996

Comments, and suggestions for future CSS versions

From: Benjamin C. W. Sittler <bsittler@nmt.edu>
Date: Mon, 2 Sep 1996 18:55:27 -0600 (MDT)
To: HTML/SGML Stylesheet Discussion Group <www-style@w3.org>
Message-ID: <Pine.SUN.3.95.960902164152.27516A-100000@rust>
First, some comments on the existing CSS1 draft:

In section 1.6, "Contextual Selectors":

> Contextual selectors can look for tags, classes, IDs or combinations of
> these: 

>   DIV P           { font: small sans-serif }
>   .reddish H1     { color: red }
>   #x78y CODE      { background: blue }
>   DIV.sidenote H1 { font-size: large }

> This first selector matches all elements with class 'punk' that have an
> ancestor of element 'P' with class 'reddish'.
> The second selector matches all 'CODE' elements that are descendants of
> the element with 'ID=x78y'. 

Is this a typo? The comments don't seem to match the CSS.

Secondly, I have some comments that may apply to a future CSS version
(CSS2?) Many of these are derived from the early CSS proposals, although I
have tried to simplify syntax somewhat:

First, being able to style elements depending on location in the parse
tree would be quite valuable, and could let the associated HTML be a lot
less cluttered (and therefore more maintainable.) We already have simple
hierarchical selectors:

H1 EM { color: green }          /* selects all emphasized text in H1
                                   headers */
UL UL { list-style: circle }    /* selects all nested lists */
UL UL UL { list-style: square } /* selects all lists nested two or more
                                   levels */

I propose to extent that syntax to allow selection based on a number of
properties:

Attribute Values

H1[CLASS = punk] { color: green } /* same as H1.punk */
A[HREF] { color: blue } /* any A with an HREF attribute specified */
A[HREF = "#index"] { color: red } /* and A with HREF="#index" */

Successor/Predecessor Relationships

Assume the following parse tree fragment:

1 DIV
2   H1
3     EM
4   P
5     EM
6   P
7   P
8     EM
9     EM
10  H1
11  P
12  H1
13  P
14  P
15  P

There are many ways to access specific elements, here are a few:

Table: To select element => use selector   /* comments */
       1                 => DIV
       2                 => DIV ;H1  /* initial ; means start at first child */
                         or DIV ;          /* ; by itself means first child */
       3                 => DIV ;H1 EM
                         or DIV ;H1; /* final ; means next child */
       4                 => DIV ;H1;P
       5                 => DIV ;H1;P EM
       6                 => DIV ;H1;P;P
       7                 => DIV ;H1;P;P;P
       8                 => DIV ;H1;P;P;P ;EM
       9                 => DIV ;H1;P;P;P ;EM;EM
                         or DIV ;H1 EM$ /* N$ means last child iff it's N */
       10                => DIV ;H1;P;P;P;H1
       11                => DIV ;H1;P;P;P;H1 P
       12                => DIV ;H1;P;P;P;H1
       13                => DIV ;H1;P;P;P;H1 ;P
       14                => DIV ;H1;P;P;P;H1 ;P;P
       15                => DIV ;H1;P;P;P;H1 ;P;P;P
                         or DIV P$
                         or DIV $ /* $ by itself means last child */
       4, 11, 13         => DIV H1;P
       9                 => DIV P EM;EM
       3, 5, 8           => DIV ;EM
       3, 5, 9           => DIV EM$
       3, 5              => ;$ /* ;$ means only child */

other examples:

UL ;, OL ; { color: blue } /* make first child in every list blue */
;LI, ;LH { color: red } /* make initial list items or headers red */
;LI$ { color: yellow } /* if a list has only one item, an LI,
                          make it yellow */

One could extend this using a numeric selector notation:

=child[1]     /* first child, equivalent to ; */
LI=child[1]   /* first child where that child is an LI, equiv. to ;LI */
=child[1-3] /* first three children, equivalent to ;, ;;, ;;; */
=child[4-]  /* fourth and all succeeding children */
P=child[2-] /* all children after the first which are P elements */

Of course, all this can be combined:

DIV.special H1;P, TABLE.special TH;TD { background: yellow }
;:first-line { color: blue }
;:first-line A[HREF] { color: red }

------
Any comments are appreciated. -Ben
Received on Monday, 2 September 1996 21:01:03 GMT

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