Re: Styling by attribute-based association?

On Tue, Oct 25, 2005 at 05:28:17PM -0400, Matthew Raymond wrote:
> 
> Ian Hickson wrote:
> > On Tue, 25 Oct 2005, David Hyatt wrote:
> > 
> >>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.
> > 
> > 
> > That doesn't address all of Matthew's requests, and would be specific to 
> > <label>, not addressing similar problems with elements such as <map>, etc. 
> > But I agree that it might make sense too.
> 
>    Another problem with David's idea is that it fails to address styling
> based on attribute values rather than selectors. An example would be
> specific labels for specific <input> types in HTML:
> 
> | label:friend(for, input[type=datetime])
> 
>    Then there's the associations to elements with specific classes or IDs:
> 
> | label:friend(for, .myClass)
> | label:friend(for, #myID)
> 
>    Also, David's idea is misleading in some cases. As <label> has been
> redefined in Web Forms 2.0, a label may not be able to have focus, for
> instance. (Then again, it may be that we don't what this kind of styling
> anyways, considering UI conventions. Yet, there again, if
> non-conventional UI behavior is implemented, you'd significantly
> complicate the method of styling that way.)

Another idea: two new connectors.

    E -> F
        Matches all elements F that are pointed to by an element E, by
        means of an IDREF or URL. For example:

            LABEL:hover -> INPUT {background: yellow}

        matches the INPUT element if the LABEL is hovered over:

            <INPUT ID=a...>... <LABEL FOR=a>Label</LABEL>

    E <- F
        Matches all elements F that point to an element E, by means of
        an IDREF or URL. For example:

            INPUT:hover <- LABEL {background: yellow}

        matches the LABEL element if the INPUT element is hovered over:

            <INPUT ID=a...>... <LABEL FOR=a>Label</LABEL>


I haven't thought about it for more than 5 minutes, so I'm sure there
are lots of problems. But at least in 5 minutes I discovered fewer
problems with such connectors than with pseudo-elements or
pseudo-classes.

OK, easy to use it isn't. Maybe 'E #linkto F' and 'E #linkfrom F'
are more readable?



Bert
-- 
  Bert Bos                                ( W 3 C ) http://www.w3.org/
  http://www.w3.org/people/bos                               W3C/ERCIM
  bert@w3.org                             2004 Rt des Lucioles / BP 93
  +33 (0)4 92 38 76 92            06902 Sophia Antipolis Cedex, France

Received on Tuesday, 25 October 2005 22:50:38 UTC