Remix.run Logo
bryanrasmussen 2 hours ago

>Selectors are a global namespace.

what does this mean? Selectors are how you query a particular element to apply styles to it, I think what you mean is that selectors as a query language does not allow you to query any element from any other element the way you can with XPath but in many use cases you need to start querying globally.

but we can also see that the only way that querying from element to any other element makes sense if you could do something like (pseudo XPath / CSS abomination coming up)

.someclass[[ancestor::.mainEntry .headline:empty]]

or maybe you would prefer

.mainEntry[[.headline:empty]] .someclass

which sure, I have, some very few times thought boy it would be nice if I could do more involved context selection in CSS based on an elements surrounding DOM than sibling axis and the like offer.

however > Imagine if every variable and function in your favorite programming languages were global and so had to be unique.

yes, I know you are not saying that variables in CSS need to be global. However I think you have perhaps not internalized yet how CSS variables and scoping rules work have created a situation that allows for often elegantly solving problems that one might wish one had a more powerful query language to handle.

The following is of course not elegant, but is an example of how we change the design of .someclass based on having an ancestor mainEntry that has an empty .headline using variables.

https://codepen.io/bryanrasmussen/pen/xbEoabM

>OK, so how do you square that with dynamic loading? Some navigation paths through an app would inject some CSS first whereas others would inject other CSS first.

yes I've run into this situation before, however for me it was a framework issue not a css standards issue, and it sounds to me with phrases like "navigation paths" and "app inject some css" that it was a JS framework that made you unhappy and not actually the state of Web standards.

Izkata 17 minutes ago | parent [-]

> .someclass[[ancestor::.mainEntry .headline:empty]]

> or maybe you would prefer

> .mainEntry[[.headline:empty]] .someclass

I don't really know xpath but isn't that this?

.mainEntry:has(.headline:empty) .someClass