W3C home > Mailing lists > Public > www-style@w3.org > April 2005

Re: [selectors] Tree selectors

From: Mats Palmgren <mats.palmgren@bredband.net>
Date: Sat, 02 Apr 2005 14:57:17 +0200
Message-ID: <424E96AD.6040907@bredband.net>
To: Daniel Glazman <daniel.glazman@disruptive-innovations.com>
CC: Ian Hickson <ian@hixie.ch>, BachusII <BachusII@planet.nl>, Anne van Kesteren <fora@annevankesteren.nl>, W3C CSS List <www-style@w3.org>, dbaron@mozilla.org

Daniel Glazman wrote:
> 
> Mats Palmgren wrote:
> 
>> How about something similar to counters? [1]
>>
>>   body, section, navigation { depth-weight: IDENT 1; }
>>   h:depth(IDENT, 3) {}
>>
>> that is, :depth(IDENT, number) would match an element where the sum of
>> its ascenders' weight for the depth IDENT equals number.
> 
> 
> 
> As Ian said, it's a neat idea but it adds a new dependency from
> selectors to values. And that's quite a bad one IMHO:
> 
>   div:depth(divdepth, 3) { depth-weight: divdepth 1; }
> 
> K-boom...
> 

Just for fun I implemented my suggestion above for Mozilla and it
seems to work fine (the selector above does not match anything).

Daniel Glazman wrote:
> Even if you solve that saying that depth-weight property cannot be used
> if the :depth() functional notation is used in the selector part, you'll
> still have to resolve depth-weight declarations in a first step before all
> other declarations:
> 

The computed value of -moz-depth-weight for an element only affects
descenders of that element. It follows that :-moz-depth() only looks at
-moz-depth-weight of its ancestors. Maybe I'm missing something -
could you give me a complete example that I can test?

Here's one of my testcases to illustrate:

simple.css:
body,form,div,h,navigation,section {
     display:block; color:black; background:white;
}

body, section, navigation { -moz-depth-weight: tree1 1; }
navigation navigation     { -moz-depth-weight: tree1 -1; }

h:-moz-depth(tree1, 1)    { background:lime; }
h:-moz-depth(tree1, 2)    { background:blue; }
h:-moz-depth(tree1, 3)    { background:yellow; }

section:-moz-depth(tree1, 3) { -moz-depth-weight: tree2 1; }
h:-moz-depth(tree2, 1):-moz-depth(tree1, 3) { background:silver; }
h:-moz-depth(tree2, 1)                      { background:pink; }


<?xml version="1.0" ?>
<?xml-stylesheet type="text/css" href="simple.css" ?>
<body>
   <h>h1</h>
   <form>
    <section>
     <div>
      <h>h2</h>
     </div>
     <div>
      <navigation>
       <h>h3</h>
       <section>
        <h>h4</h>
       </section>
       <navigation>
        <h>h5</h>
       </navigation>
      </navigation>
     </div>
    </section>
   </form>
</body>


The result is:
h1: lime
h2: blue
h3: yellow
h4: silver
h5: blue


/Mats Palmgren
Received on Saturday, 2 April 2005 12:58:02 GMT

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