Re: Composite pseudo classes

I'm here :)

Alias solves a lot of the cases, and would be a big improvement, but there
are some cases that require a bit of scripting to get right. Ideally, it
would be possible to replace all of the non-positional selectors in jQuery
with whatever new API we came up with. A combination of aliases, which
could be implemented efficiently, and a safety-valve API for more complex
selectors (which, let's say, could only be used in
querySelectorAll/find/findAll because of performance considerations
in pathological cases) would be great.

-- Yehuda

On Thursday, November 10, 2011, Brian Kardell wrote:

> In the context discussed, I also proposed that these aliases be usable via
> querySelectorAll...  I think this would allow libraries like sizzle/jquery
> to simplify even more... I'm not sure whether John or Yehuda or anyone
> involved with jquery follow this list, perhaps we should cross post a
> proposal.
> On Nov 9, 2011 12:26 PM, "Brian Kardell" <bkardell@gmail.com<javascript:_e({}, 'cvml', 'bkardell@gmail.com');>>
> wrote:
>
>> It wouldn't be a full one to one swap if you had a preprocessor now
>> though because preprocessing would expand the selectors and the two would
>> differ in specificity score.
>> On Nov 9, 2011 12:08 PM, "Charles Pritchard" <chuck@jumis.com<javascript:_e({}, 'cvml', 'chuck@jumis.com');>>
>> wrote:
>>
>>> +1 for hocus, pocus.
>>>
>>> Things get awfully verbose once you're working with pseudo-selectors.
>>>
>>> While trying (and failing) to tweak the <audio>/<video> controls in
>>> webkit to be larger, I was pretty
>>> overwhelmed with selector duplication.
>>>
>>> audio::-webkit-media-controls-**timeline-container,
>>> video::-webkit-media-controls-**timeline-container
>>> http://pastebin.com/zGdndGpB
>>>
>>> Alias would be a big help in making my code more readable where it needs
>>> to be.
>>>
>>> -Charles
>>>
>>> On 11/9/11 8:59 AM, Brian Kardell wrote:
>>>
>>>> Has the advantage of being pretty easy to implement too... :)
>>>>
>>>> If you are a jquery/sizzle user and have grown accustomed to their
>>>> extensions the following snippet would then cause 13 of them to be
>>>> immediately useable in your regular CSS too...
>>>>
>>>> @alias jq-button      input[type=button];
>>>> @alias jq-checkbox    input[type=checkbox];
>>>> @alias jq-file        input[type=file];
>>>> @alias jq-header      h1,h2,h3,h4,h5;
>>>> @alias jq-image       input[type=image];
>>>> @alias jq-input       input,textarea,select,button;
>>>> @alias jq-password    input[type=password];
>>>> @alias jq-radio       input[type=radio];
>>>> @alias jq-reset       input[type=reset];
>>>> @alias jq-selected    option[selected];
>>>> @alias jq-submit      input[type=submit];
>>>> @alias jq-text        input[type=text];
>>>> @alias jq-parent      :not(:empty);
>>>>
>>>>
>>>>
>>>>
>>>> On Wed, Nov 9, 2011 at 11:42 AM, Tab Atkins Jr.<jackalmage@gmail.com<javascript:_e({}, 'cvml', 'jackalmage@gmail.com');>>
>>>>  wrote:
>>>>
>>>>> On Wed, Nov 9, 2011 at 4:15 AM, Pete Boere<pete@the-echoplex.net<javascript:_e({}, 'cvml', 'pete@the-echoplex.net');>>
>>>>>  wrote:
>>>>>
>>>>>> Usually when using the :hover pseudo class it is appropriate to also
>>>>>> use the
>>>>>> :focus pseudo class for accesibility reasons. [1]
>>>>>>
>>>>>> Is it possible to have composite pseudo classes for this purpose?
>>>>>> I've implemented a kind of composite pseduo class in a PHP CSS
>>>>>> preprocessor[2] like this:
>>>>>>
>>>>>> .nav a:hocus { ... }
>>>>>> .nav a:pocus { ... }
>>>>>>
>>>>>> compiling to
>>>>>>
>>>>>> .nav a:hover, .nav a:focus { ... }
>>>>>> .nav a:hover, .nav a:focus, .nav a:active { ... }
>>>>>>
>>>>>> internally a substitiution is being made using an :any (:matches)
>>>>>> shim [3]
>>>>>> :hocus =>  :matches(:hover,:focus)
>>>>>>
>>>>>>
>>>>>> [1]
>>>>>> http://www.456bereastreet.com/**archive/201004/whenever_you_**
>>>>>> use_hover_also_use_focus/<http://www.456bereastreet.com/archive/201004/whenever_you_use_hover_also_use_focus/>
>>>>>> [2] http://the-echoplex.net/**csscrush<http://the-echoplex.net/csscrush>
>>>>>> [3]
>>>>>> https://github.com/peteboere/**css-crush/blob/master/plugins/**
>>>>>> hocus-pocus.php<https://github.com/peteboere/css-crush/blob/master/plugins/hocus-pocus.php>
>>>>>>
>>>>> Like Brian said, he and I and Boris Zbarsky have been privately
>>>>> brainstorming over something like this.
>>>>>
>>>>> I think it's quite reasonable to have a mechanism to define aliases
>>>>> for compound selectors.  This allows for CSS that is easier to read
>>>>> and maintain (though I personally don't think that 'hocus' and 'pocus'
>>>>> are very good names ^_^).
>>>>>
>>>>> Something like this, perhaps:
>>>>>
>>>>> @selector-alias :my-pseudo :matches(:focus, :active);
>>>>>
>>>>> ~TJ
>>>>>
>>>>>
>>>>>
>>>

-- 
Yehuda Katz
(ph) 718.877.1325