W3C home > Mailing lists > Public > www-style@w3.org > March 1999

Re: Question: Identation based on first child, how?

From: Ian Hickson <py8ieh@bath.ac.uk>
Date: Mon, 15 Mar 1999 13:19:39 +0000 (BST)
To: Alix Pexton <T.A.N.Pexton@scm.brad.ac.uk>
cc: www-style@w3.org, howcome@w3.org
Message-ID: <Pine.GSO.4.04.9903151307140.2234-100000@amos.bath.ac.uk>
On Mon, 15 Mar 1999, Alix Pexton wrote:

> I have a specification document in HTML where each sub-part uses the
> next smallest heading than the last, a standard form I believe. Each
> subpart is its own DIVision, (child of the body element), with the
> heading and a number of paragraphs. I want to have it so each level
> of sub-part was subtly more indented than its parent, and use CSS to
> do it.
>
> I was trying to figure out a way to indent a division based on what
> the first tag inside it was, i.e. if the first tag was <h1> no
> indent, <h2> 2 pixels and so on, but I couldn't get it to work. As
> far as I can see it would either be the opposite of the > selector in
> CSS2 (< ?) or maybe the opposite of the + selector also in CSS2 (- ?),
> but I cannot find a way to perform the exact formatting I require.

CSS does not currently have a way of styling elements based on their
contents. At some point I suggested (a few months back, now) a pseudo-
class selector with a syntax similar to the :lang() psuedo-class,
which would work like this:

   DIV:contains(H1) { margin-left:  5%; }
   DIV:contains(H2) { margin-left: 10%; }
   DIV:contains(H3) { margin-left: 15%; }
   DIV:contains(H4) { margin-left: 20%; }
   DIV:contains(H5) { margin-left: 25%; }
   DIV:contains(H6) { margin-left: 30%; }

The :contains() pseudo-class takes as its parameter a selector. If the
any of the children of the element in question matches the selector,
then the pseudo-class is taken as being true.

Also, since it is a pseudo-class and not a pseudo-element, the
following would be valid:

   a:contains(b) c  { }

...and would match the marked element below:

   <a>
    <c matched="true"/>
    <b/>
   </a>

This is an _incredibly_ powerful idea, on par with regexp selectors,
but much simpler to implement (since it basically is already
implemented in the selector matching code).

The main difficulty with it is that it is incompatible with
incremental rendering (just like tables and vertically stretched
backgrounds).

-- 
Ian Hickson 
U+2642 U+2651
U+262E U+2603 U+263A
Received on Monday, 15 March 1999 08:27:06 GMT

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