Re: List of selectors under consideration for Selectors Level 4?

On Thu, Aug 16, 2012 at 11:22 AM, Greg Houston
<gregory.houston@gmail.com> wrote:
> On Thu, Aug 16, 2012 at 10:07 AM, Marat Tanalin | tanalin.com
> <mtanalin@yandex.ru> wrote:
>> 16.08.2012, 18:46, "Tab Atkins Jr." <jackalmage@gmail.com>:
>>> Instead of "p - ul" (select a <ul> whose following sibling is a <p>),
>>> do "!ul + p".  Same selector as always, but the ! tells the engine
>>> which element is the "subject" of the selector.
>>>
>>> As Marat says, you can combine this with :matches() if you then want
>>> to chain off of the element.
>>
>> Marat said this combination is horrible compared with previous-sibling combinator.
>
> Thanks everyone. Yeah, ":matches(!UL + P) > LI" is definitely way more
> confusing than "P - UL > LI", but I am glad there is a way to do it
> none-the-less.

Using :matches() in that manner is basically equivalent to jQuery's
:has().  That is, the following two selectors are equivalent:

CSS: :matches(!ul + p) > li
jQuery: ul:has(+ p) > li

> It seems that some of the more commonly used variations
> on the use of :matches(!) could use their own selectors, e.g.,
> previous-sibling and jQuery's .closest(), .parent(), and parents().
>
> .closest()
> Get the first element that matches the selector, beginning at the
> current element and progressing up through the DOM tree.

Yeah, a "closest descendant" combinator has been suggested before, and
was recorded in the wiki page for Selectors level 4.  I've moved it
and several others over to a generic "next level Selectors" page:
<http://wiki.csswg.org/spec/selectors>

> How do you write the opposite of .panel > header > .btn?
> :matches(!panel > :matches(!header > .btn))
>
> I gave it a go, but probably didn't get it right. It's definitely confusing.

You mean, you want to grab a .panel that has a header child that has a
.btn child?  If so, you don't need to use :matches() at all - just use
the subject selector:

!.panel > header > .btn

~TJ

Received on Friday, 17 August 2012 16:53:46 UTC