W3C home > Mailing lists > Public > www-style@w3.org > January 2010

Re: [css3-selectors] Grouping

From: François REMY <fremycompany_pub@yahoo.fr>
Date: Sat, 9 Jan 2010 11:36:08 +0100
Message-ID: <9B347BD6DE5041A8BB36D4A83BA4561D@Fremy1>
To: "fantasai" <fantasai.lists@inkedblade.net>, "Brad Kemper" <brad.kemper@gmail.com>
Cc: "Tab Atkins Jr." <jackalmage@gmail.com>, "Nikita Popov" <privat@ni-po.com>, "news" <news@terrainformatica.com>, "www-style list" <www-style@w3.org>
What you're speaking about now *IS NOT* the
original meaning of :matches selector. It has been
introduced in this mailing list for another purpose.

p:matches(a:hover) was introducted to match any
P tag that contains an element matching "a:hover"
in it. The :has() syntax has been used too.

The main reason why this pseudo-class was
rejected by some implementors : it doesn't
allow to apply changes only to sibling
elements. Adding an element to the DOM could
modify the style of parent elements, which is
currently not possible (we can only modify
sibling' element style, they said)

See http://lists.w3.org/Archives/Public/www-style/2002May/0018.html
for more information about :matches proposal.

If we return to your current proposal (selector
grouping), it was also discuted previously under
many names. At a time, this was even discussed
to be part of the "css variables" pack (BTW, I'm
disapointed that no progress has been made on
this feature many people would love to have).

Many syntax had been proposed, but they were
rejected since they didn't comply with CSS
grammar or were too difficult for the author to
use.

I think the best syntax ever, and that many
server-side css parser does implement (like
http://lesscss.org/) under the name "nested
rules", would really be nice to have in CSS.

Many syntax would be possible among theses one :

--------------------------------------

#myElement > div {
    display: block;
    width: 500px;

    @rule > a {
        display: block;
        color: blue;
    }

    @rule > a:hover {
        color: red;
    }
}

--------------------------------------

#myElement > div {
    display: block;
    width: 500px;
    sub-rules: {
        :root > a {
            ....
        }

        :root > a:hover {
            ...
        }
    };
}

--------------------------------------

@variable "ElmDiv" {
    #myElement > div
}

:var(ElmDiv) > a {
    display: block; color: blue;
}

:var(ElmDiv) > a:hover {
    color: red;
}

--------------------------------------

...

It would be great, though, to avoid using a
single pseudo-class (:matches) to discut about
two very different proposals, because it may
conduce to confusion.

Regards,
François

--------------------------------------------------
From: "fantasai" <fantasai.lists@inkedblade.net>
Sent: Friday, January 08, 2010 11:32 PM
To: "Brad Kemper" <brad.kemper@gmail.com>
Cc: "Tab Atkins Jr." <jackalmage@gmail.com>; "Nikita Popov" 
<privat@ni-po.com>; "news" <news@terrainformatica.com>; "www-style list" 
<www-style@w3.org>
Subject: Re: [css3-selectors] Grouping

> On 01/08/2010 10:05 AM, Brad Kemper wrote:
>>
>> On Jan 8, 2010, at 9:55 AM, Tab Atkins Jr. wrote:
>>
>>> On Fri, Jan 8, 2010 at 11:33 AM, Nikita Popov<privat@ni-po.com>  wrote:
>>>> I think that the variant with brackets I proposed is little bit better,
>>>> because it  could  be more widely used, e.g.
>>>> input([type=submit], [type=number], ...)
>>>> ("could" because I don't know, whether something like this, would be
>>>> good...)
>>>
>>> There's still no need to extend the syntax there.  You can do that
>>> with the pseudoclass:
>>>
>>> input:any([type=submit],[type=number]) {}
>>>
>>> I don't think there's anything you could do with parens in selectors
>>> that wouldn't be possible with the pseudoclass.  As well, you stay
>>> within existing syntax, which means we don't have to change the
>>> grammar and possibly introduce new bugs.
>>
>> I really like the idea in general, but I'm not sure about it being a
>> pseudo-class.
>
> Consider that it's the opposite of :not().
>
>   div:not(.header, .footer) /* div that is neither .header nor .footer */
>
>   div:any(.header, .footer) /* div that is either .header or .footer */
>
> As Tab noted, most earlier proposals used :matches()
>
>   div:matches(.header, .footer)
>
> ~fantasai
> 
Received on Saturday, 9 January 2010 10:36:41 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:23 GMT