I want a change in Selectors, my baby, for post-CSS 3. Section 6.6.5.1 of the current provisional REC says:

The :root pseudo-class represents an element that is the root of the document. In HTML 4, this is always the HTML element.

This is clearly not enough and I have a use case:

  • imagine you have two nested tables. You want to count the number of cells in the tbodies of the outermost table. That outermost table has no ID, no class, nothing to differenciate it from another table in the document. Let's call that outermost table mytable. Then mytable.querySelectorAll("tbody > tr > th, tbody > tr > td").length is not what we are looking for to count the cells because it will count ALL cells, including the cells of the innermost table... :root does not help here because it does not represent the root of the current scope. The :not() functional pseudo does not help either. The count cannot be performed using querySelector or querySelectorAll even if it could be the easiest, the simplest way. (This is not an imaginary use case, I hit that issue in BlueGriffon...)
  • imagine you have a scoped stylesheet applying to a subtree with the root of the subtree being a totally arbitrary element. It has no ID, no class you can use, nothing. It's then NOT selectable in the scoped stylesheet at all, you cannot apply styles to that element through the scoped stylesheet...

So I want the following change for the next step of Selectors:

The :root pseudo-class represents an element that is the element root of the current scope. In the case of CSS, the current scope is determined by the following rules:

  • if :root is used inside the parameter of a call to a.querySelector or a.querySelectorAll where a is a Document, then the current scope is the whole document
  • if :root is used inside the parameter of a call to a.querySelector or a.querySelectorAll where a is an Element, then the current scope is the subtree of the document a is the root of
  • if :root is used inside a non-scoped stylesheet, the current scope is the whole document
  • if :root is used inside a scoped stylesheet, the current scope is the scope of the stylesheet

That way, my count above is mytable.querySelectorAll(":root > tbody > tr > th, :root > tbody > tr > td").length and it is possible to style the root of a scope using the trivial selector :root. In the current CSS 3 case and non-scoped stylesheets, :root still means the root of the document. In the case of calls to Element.querySelector or Element.querySelectorAll, these calls reply an empty list anyway if the argument contains a :root pseudo and if the element is not the root of the document. In other terms, it's not something web authors use because it's totally useless at this time.