Separate specs for CSS selectors and Javascript DOM selectors
Hi. I’m new here and I’d like to propose one important for me thing. I’m JS developer and I use jQuery for 2 years. Recently I tried to refuse of using it and use newest native things as querySelector.
The problem is that document.querySelector and document.querySelectorAll uses only selectors that described in specs for using in CSS. I’ve heard that next selector specs will include parent selector:
For example “ul! > li.active” – selects ul that includes li.active. My opinion is that this kind of selector is not flexible. As little example, how to select li that places in ul that contains li.active. In other words how to select siblings of li.active?
The answer is we should have :has() pseudoclass:
ul:has(li.active) > li
I’ve heard that it wasn’t implemented because of perfomance: http://snook.ca/archives/html_and_css/css-parent-selectors/ .
But if we use this selector in Javascript the problem disappears, because this query uses only once when developer needs to get element list. So why querySelector and querySelectorAll uses CSS selectors only? I’d like to have 2 cpecs: first is for using in CSS and second for using in JS (the first is subset of the second).
Idea can really help in JS DOM development, we’re haven’t use large and hardcoded DOM web spiders like jQuery.
Another very serious problem in querySelector is that we can’t select element itself. For example I want to get all children of the element. How can I do this?
el.querySelectorAll( ‘> *’ );
… doesn’t work
But if we’ve got something like ::this pseudoelement we could reduce code line number and improve performance.
Don’t you think that CSS selectors very poor in Javascript development?
P. S. As I said I’m new here and registered to send this message to comunity. Sorry if this is not good place for it.
Sounds like you want to get in touch with the Web Apps Working Group or the CSS Working Group instead. Our community group is focused on using selectors as fragment identifiers, that is using a CSS selector instead of an ID name in the hash fragment of a URL, which is different from the Selectors API which you’re referring to.
Anyway, I don’t think it’s feasible to maintain two different selector flavors for CSS and DOM. The
!symbol is not just a “parent selector”; it’s used to point to the subject of the selector, which can be anything and not just a parent element.So, you can use
!to select siblings. If you want to select all siblings ofli.activeexcept itself, the level 4 selector to use would look something likeul > li! ~ li.active, ul > li.active ~ li. Of course, it’s not implemented yet so it won’t actually work right now.The
::thispseudo-element you’re thinking of actually takes the form of a:scopepseudo-class in Selectors level 4, which in turn is being used with Selectors API level 2. The syntax you propose is also described in Selectors API 2, as something called a relative selector.Thank you for your responce. Sorry that I didn’t get what does mean “fragment identifiers”.