RE: a recall for a missing combinator

My biggest problem with the current :not propositions is that they are
targeted at the given example. Sure this is fine if you want to express that
the review header should not be styled, but there is more.

My problem is actually a bit more generic. I am often asked to create
separate components and provide styling for them, not knowing how they will
be implemented. In this case there is a review inside the product, but in
most cases it should not be limited to just reviews. Other content types
(like related product, related launch events - for games, whatever) could be
nested, also sporting headers that should not inherit this styling.

If you check many frameworks out there, you'll see that they try to provide
css for the most common nestings of the components they offer, resulting in
overly verbose and confusing css files. It's really this problem I'd like to

So rather than stating what elements not to style (which, if you believe in
future-proof coding, is always an uncertain factor), I would just want to
state what elements I do want to style, making sure that whatever gets
nested in their in future versions does not inherit unwanted stylings.

> article.product header:not(article.product article header)

In most cases this would probably also need article.product
header:not(article.product section header) to make it more robust, making it
even more verbose :)

> @scope article.product {
>   @stop article;
>   header { ... }
> }

As long as you do @stop article, section; this might work. For something I'd
be using a lot, it's still a pretty complex syntax though :)

Niels Matthijs

-----Original Message-----
From: fantasai [] 
Sent: woensdag 16 november 2011 0:50
Subject: Re: a recall for a missing combinator

On 11/15/2011 12:44 AM, Niels Matthijs wrote:
> *The (partial) solution*
> **
> Translating my need to a practical solution may not be all that easy. The
closest I get is looking for the first nested
> instance and target all matches on that level:
> article.product (?) header {.}
> This should match the first nested instance of the header, ignoring
whatever levels that come in between .product and header,
> but failing to match the header in
> *Problems with the solution above*
> I know this is not a full fix for my problem. If I have <p> elements
nested on several levels nested inside the
> article.product I still can't style them differently from the <p> elements
inside the This would call for a
> way where css could define an actual scope. While I think this could be
incredibly powerful, it's also destructive in the
> wrong hands.

If I relaxed the restriction on not allowing combinators in :matches() and
then you could do this:

article.product header:not( *) {

That reads as "a header that is a descendant of article.product but is not
a descendant of". It would also solve your <p> problem.

article.product p:not( p) {


Received on Wednesday, 16 November 2011 08:37:36 UTC