Skip to toolbar

Community & Business Groups

CSS Selectors as Fragment Identifiers Community Group

Decades after the web emerged, hypertext creators pointing to a specific place in a resource they don't control still have to hope or beg that there's a convenient link anchor placed there by the author. CSS selectors let us point anywhere in a document - let's bring them to hypertext! You can see a very rough initial plan of this at http://simonstl.com/articles/cssFragID.html.

Note: Community Groups are proposed and run by the community. Although W3C hosts these conversations, the groups do not necessarily represent the views of the W3C Membership or staff.

No Reports Yet Published

Learn more about publishing.

Chairs, when logged in, may publish draft and final reports. Please see report requirements.

Publish Reports

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.

Section 5.1

A quick note that as of this post, section 5.1 starts:

Selectors Level 3 [SELECT], is nearing specification completion and already has seen substantial adoption, following past development of Levels 1 and 2. There may eventually be Levels 4 and beyond, which will require more sophisticated processors.

That was true when Section 5.1 was written, but obviously it’s out of date now.  I propose that we just drop those sentences, since the ones that follow are the real meat of the section and they aren’t bound any particular point in time.