Re: reverse nested selectors

[www-style added to distribution.]

At 12:22 AM -0700 6/13/04, gerard wrote:
>I'd like so suggest that an operator to reverse the matching order 
>of selectors could be a very useful thing.
>
>Ex:
><div class="ColorBackground>
>	<img class="AlphaImage">
></div>
>
>If one wanted to select any <div> that contained an image with class 
>"AlphaImage", there is no way to do so.
>this situation (for me at the moment) is complicated by 
>"ColorBackground" being any of eight values, but I would like each 
>of those div classes to share common attributes.
>
>the selector:
>
>div img.thumb { }
>
>will select the img tag for modification under current rules. There 
>is no way to universally select that div under CSS2.

The decision logic in CSS does not support making decisions relative
to the properties allocated to peers (siblings) all that well. Here
the background and the image are perceptually siblings; they appear
next to one another. Not in the parse tree, but in the topology where the
color mistakes matter. There are neighbor selectors for things
adjacent in the parse tree, but that may not work, here.

So to bind the background color of an ancestor-of-image element in a
way that is sensitive to the hasAlphaChannel property of the image
the best you can do may be to server-side process the composed
content so as to lift the knowledge that the image has an alpha
channel from the hasAlphaChannel property of the image to a
containsAlphaImage property on the container being allocated a
background. This may be included in a list of properties in the class
attribute.

In the server-side XSLT you detect this condition with an XPath selector
such as:

  descendant::div [img and attribute::class="hasAlphaChannel"]

And in the HTML4 output you place a token in the token list of the class
attribute of the DIV element, such as

  class="sponsor logos containsAlphaImage"

For more on apt use of the 'class' attribute, see

http://tantek.com/log/2002/12.html#L20021216t2238

Al

>I think an operator such as a leading "!"(exclamation mark) or 
>"<"(less than) should reverse the matching order such that the 
>selector above would match the most outside element instead of the 
>most inner one.
>
>Ex:
>	! div img.thumb { }
>
>Placing the modifier at the start of the line seems the best choice 
>to me as the intent is clear from outset. I would suggest that this 
>work for all selector types, not just the simple inheritance  case 
>demonstrated.
>
>I write this because in the case I just wanted to use it for it 
>would save significant markup in the style sheet and be easier to 
>read and maintain than the alternatives. I was actually rather 
>shocked that I could not locate an existing mechanism to simply 
>select a parent instead of a child. With such a selector my page 
>could perhaps be
>
>Specifically in this case, I want to use the enclosing div's 
>background color setting to for the color behind a PNG image file 
>with alpha channel. There will be several colors available, and it 
>would be simpler to set all the other common attributes of the div 
>via such a selector than to set them all discreetly or by grouping. 
>I'm certain there are other more blase cases for such an operator, 
>especially in dynamically generated content.
>
>
>------------------------------------------------------------------------------------------------
>No matter where you go... there you are.

Received on Sunday, 20 June 2004 15:54:03 UTC