Re: Composite pseudo classes

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> 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>
>>  wrote:
>>
>>> On Wed, Nov 9, 2011 at 4:15 AM, Pete Boere<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
>>>
>>>
>>>
>