Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Using the :not selector globally, is it possible?

See original GitHub issue

Is there a way to use the :not() global selector?

When using this (within a Gatsby site)

& > div:nth-of-type(1) :not(ul) a {
/* ... */
}

it gets transformed into (without spacing before the :not() )

& > div:nth-of-type(1):not(ul) a {
/* ... */
}

(here there’s a fiddle showing the consequence of this) https://jsfiddle.net/qzxcyw0s/1/

Issue Analytics

State:
Created 4 years ago
Comments:8 (4 by maintainers)

Top GitHub Comments

1reaction

thysultancommented, Mar 10, 2020

Even given the current heuristics i don’t see why it wouldn’t be possible given that :not(ul) is equivalent to *:not(ul) so the selector can be rewritten to & > div:nth-of-type(1) *:not(ul) a.

0reactions

kuworkingcommented, Mar 13, 2020

Indeed I neither can reproduce it with a sandcodebox,

not with React
and neither with Gatsby, which has surprised me

So I guess there’s something obscure with my code (but I’m not crazy, there there’s the screenshot 😬)

Thanks for the fast responses!

*(I used another css to get the job done)

Top Results From Across the Web

Global selector combined with :not(.class) doesn't seem to work

I used this selector, main *:not(.no-material) input , which, to me, should work and select the last 4 input s, but it doesn't....

How Not Selector Works in CSS? - eduCBA

When we are working with CSS :notselector, it does not match all the elements that are excluded from CSS application. The CSS:no selector...

CSS Pseudo-classes: :not() and :target - SitePoint

Any argument passed to :not() must be a simple selector such as an element type, a class name, an ID, or another pseudo-class....

not() - CSS: Cascading Style Sheets - MDN Web Docs

The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, ...

Global Selector - Stylable

In Stylable, selectors are namespaced to the stylesheet. However there might be cases where you want to target global selectors without Stylable namespacing ......