Re: Select a parrent node with s CSS selector?

Daniel Beardsmore <public@telcontar.net> wrote:
> But you can simply style the anchor as display: block and give it any  
> borders, background image etc and use .navigation a:hover to do  
> mouse-over effects without needing to select the <li> containing the  
> anchor as well.

The case you're giving out is, of course, simple and does not require this  
new 'parent selector'.

Let's say I have a paragraph of text as _the_ navigation of the webpage,  
containing links presented in prose.

<p id="nav">The <a href="/">weblog</a> of <a href="/about">Garrett  
Murray</a>. He <a href="/portfolio">makes websites</a>, a hilarious comedy  
<a>podcast</a>, short <a>films</a> and takes <a>photos</a>. If you need to  
contact him, send him an <a href="mailto:">email</a>.</p>

p#nav < a:hover { opacity:0.8 } /*this selector would apply to p#nav, the  
ancestor*/
p#nav > a:hover { opacity:1.0 } /*this makes the links inside #nav stand  
up from the text of the paragraph (set before to opacity:0.8*/

There are multiple other applications to this. Another example is:

<div id="nav"><p>You can<span style="display:none"> navigate  
through:</span></p>
<ul>
<li><a href="#" title="see my family pictures">Photo album</a></li>
<li><a href="#" title="browse my bookmarks">Bookmarks</a></li>
</ul></div>

CSS:
#nav li a:hover:ancestor(#nav) p:first-child:after
{ content: " " attr(title); }

/* Actually, here I wanted to put the title= content of <a/> after that  
paragraph preceding the <ul/>, but what I did suggests to put the contents  
of title= of the <p/> itself after <p/> which is wrong (I don't have  
additional time to think it through). Anyway, I think you get the idea of  
the use case. */

Without falling to that complication, changing background images (on the  
body element, say translucent fixed right bottom images) when hovering  
certain links with classes, in respect to what document theme that link  
would refer to, would be easy if we had this parent selector in CSS.

James Craig <jcraig@apple.com> wrote:
> You can already make
> "disconcerting, crazily flickering" pages today with
> nothing other than :hover. Just because something
> *could* be misused doesn't mean that it
> *should* never be allowed.

+1. Also, this doesn't limit itself to css.

> If selecting the paragraph in:
>> div.content p.description a:link
> Use:
>> div.content p.description a:link:ancestor(div.content p.description) /*  
>> more specific */

Wouldn't that allow any selector to be specified there (between  
parentheses), rather than an actual ancestor? If so, the nomination  
:ancestor should be changed.

This may be widely better:
   element:nth-ancestor(#)

-- 
Yahia Chlyeh
<http://yahia.ma/antiblog/>

Received on Wednesday, 25 April 2007 02:56:21 UTC