Re: Styling by attribute-based association?

Another (IMO simpler) idea would be to just have label match the same  
pseudo-classes that the control does, i.e., if a checkbox  
is :checked, then the label can match :checked too.  Same  
for :disabled, :enabled, :indeterminate, and :focus.  I don't see any  
reason to introduce new selectors to solve this problem.

dave

On Oct 25, 2005, at 12:54 PM, Ian Hickson wrote:

>
> 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 20:00:08 UTC