Markasoftware Markasoftware - 1 month ago 5
CSS Question

Can't use children with :not pseudo selector

I'm having trouble using some relatively simple CSS selectors using

:not
. Namely, the following selector is giving me an error:

a:not(.ebook_document *)


I am trying to get all
<a>
elements that are not children of the element with class
ebook_document
. This also fails:

a:not(.ebook_document > *)


As well as this:

a:not(.ebook_document, *)


Putting the selectors on their own, not in a
:not
section works fine. What have I done wrong?

Answer

:not only takes a simple selector. (For now, CSS 4 expands that to a selector list.)

Plus, https://developer.mozilla.org/en/docs/Web/CSS/:not -

This selector only applies to one element; you cannot use it to exclude all ancestors. For instance, body :not(table) a will still apply to links inside of a table, since will match with the :not() part of the selector."

What you want is not possible using :not.

You can only go about it the other way around - format all "normal" links, and then apply different formatting for the links inside the target element(s) using .ebook_document a { ... }

So that means rather than not applying styles to those links in the first place, you might need to overwrite the styles you don't like for those links again.

(Or use initial/all to actually reset styles, but browser support for that is still lacking AFAIK.)

Comments