Re: [selectors] Tree selectors and ‘or’ selectors

Ian Hickson wrote:
>    <body>
>     <h/>
>     <section>
>      <h/>
>      <navigation>
>       <h/>
> 
> The <h> elements do not contain each other; they are contained inside 
> <body>, <section>, and <navigation> elements. These tree elements can be 
> arbitrarily nested inside each other and represent different kinds of 
> sections. What we want is to find the depth, in sections, of the <h> 
> element, and use that depth to give the elements its size.
> 
> However, elements other than section elements (i.e., in this case, other 
> than <body>, <section>, and <navigation>) should be ignored when 
> determining the levels. So the headers in the example above should render 
> identically to those in this example:
> 
>    <body>
>     <h/>
>     <form>
>      <section>
>       <div>
>        <h/>
>       </div>
>       <div>
>        <navigation>
>         <h/>
> 
> ...because the <div> and <form> elements don't introduce a new "section" 
> nesting level.

If there was a way to say ‘or’ in CSS, this would be possible to express:

:or(body, section, navigation):depth(3) h

Actually, :or has an even stronger use case here than :depth...

:depth is pretty much already possible, although with limitations. You
can write ul ul ul ul to target fourth-level (and deeper) unordered
lists. It can be pretty compact even :), although it does of course not
allow infinite nesting like depth does (but in reality, you never need
that).

However, once you want to mix elements with different names it becomes
quite a bit more difficult. Like in the example you gave[1], or e.g.
with nested ordered and unordered lists. In that case, what you really
need is :or (or be forced to write down a huge number of permutations,
see ul and ol in Mozilla’s HTML stylesheet).

Without :depth, the above selector would have to be written like:

:or(body, section, navigation) :or(body, section, navigation) :or(body,
section, navigation) h

Without :or... well... Something like this, but then 7 times longer. And
to go one level deeper, it would be 20 times longer.

body body body h, body body section h, body body navigation h, body
section body h, ...

So, :depth would be nice, sort of (I wouldn’t mind not having it), but I
see a much bigger need for :or, which shortens selectors which get
exponentially longer instead of linearly in the case of :depth.


~Grauw

[1] Note that amongst others for this reason I don't like the
‘navigation’ tag in Web Apps :), I prefer a simple <section
class="navigation"> or something similar.

-- 
Ushiko-san! Kimi wa doushite, Ushiko-san nan da!!

Received on Monday, 21 March 2005 14:36:49 UTC