- 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>
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 UTC