Re: Styling by attribute-based association?

On Tue, 25 Oct 2005, Matthew Raymond wrote:
> 
> How does one style an element based on whether it has an association to 
> another element via an attribute? Specifically, how do I style a <label> 
> with a |for| attribute?

Your two questions here seem separate. The second one is easy:

   label[for]

The first is more interesting. A long time ago I suggested the // 
combinator, a la:

   label /for/ input { ... }

...which would style an input element which had a label element pointing 
at it with a "for" attribute. What you are asking seems to be the 
opposite, which would be possible via:

   label:matches(# /for/ input:focus) { ... }

...for instance.

Both // and :matches() will probably never be added to Selectors, however, 
since they both potentially can be very expensive to process.

We could probably get a simpler pseudo-class for this purpose:

   label:friend(for, input:focus) { ... }

...where :friend() is a pseudo-class that takes two arguments, one being 
the name of an attribute to treat as an IDREF, and the second is a 
selector to apply to the referenced element, with the pseudo-class 
matching if the referenced element matches its selector.

This would take care of:

> 1) You want the label to have a dashed border when the associated
> control is selected.

...using the exact selector above, and:

> 2) You want non-associated labels do have a different style from
> associated labels, even in cases where a <label> has an incorrect |for|
> attribute value.

...using:

   label:not(:friend(for, *)) { ... }

...if we define :friend() as not matching if no element can be found that 
matches the given attribute's ID.


> 3) You want all labels for a specific control or class of controls to be
> styled in a specific way.

   label:friend(for, [type=date]) { ... }

...would select all labels pointing at elements with type="date".

This selector wouldn't be expensive to process, particularly (it wouldn't 
be cheap, but it doesn't have the potential to run away scanning the 
entire DOM tree or anything, assuming IDs are cached).

-- 
Ian Hickson               U+1047E                )\._.,--....,'``.    fL
http://ln.hixie.ch/       U+263A                /,   _.. \   _\  ;`._ ,.
Things that are impossible just take longer.   `._.-(,_..'--(,_..'`-.;.'

Received on Tuesday, 25 October 2005 19:54:25 UTC