CSS attribute selector efficient "greater than selector" code

Question

The goal is to find a way better than the current best known way of encoding the index of a child HTML element, so that encoded indices have the following property.

if (index_i >= index_p) {
  assert(encoding(index_i).indexOf(encoding(index_p)) == 0);
}

if (index_i < index_p) {
  assert(encoding(index_i).indexOf(encoding(index_p)) !== 0);
}

The current best known way of doing this is with a form of unary encoding (without the usual trailing zero. So, for example, when index_p = 10:

• encoding(index_p) == "11111111111" true
• index_i = 9; encoding(index_i) == "1111111111" true
• "11111111111".indexOf("1111111111") !== 0 true
• "1111111111".indexOf("11111111111") == 0 true

Application

An application of this is being able to use document.querySelectorAll for obtaining all child elements "greater than" a certain index, via utilisation of the "starts with" attribute selector, ^=.

For example, if we have a set of 100 div elements, and each div element has been given an attribute ei equal to its encoded index value. If our goal is to obtain a list of the last 51 of div elements, one way to do this is to request:

document.querySelectorAll('div[ei^='+Array(50).join("1")+']');

However, if we have interesting numbers of divs (1000, 10000), then we use a lot of memory storing these attribute indexes. So we get the typical "memory" vs "speed" tradeoff for setting up this indexing system.

The question is : is there a way to do the same thing, using an encoded index, such that it is shorter than this pseudo-unary version?

Motivation

One motivation that contributes to this question post here is the following subtle point: the elements may not necessarily be in the indexed order.

This unusual occurrence is by no means something that one would expect in ordinary use of the DOM, but if we are absolutely positioning the elements based on their indices, and we are swapping, inserting and deleting the elements, then it is possible to have a meaningful piece of HTML where document order is actually not related to the rendering order that ends up meaning something to somebody. And in such a case, we may still need to look at a range of elements, such as, all elements with an index larger than 72, and with an indexing method with properties like those described above, then we can use the starts with attribute selector to gather together this set.

Answer 1

You could always try something of the form

<tag h="111" t="11111" o="1">

where you use your unary encoding for each of the hundreds (h), tens (t) and ones (o) attributes.

A greater-than CSS selector would then look like

tag[h^="1111"],tag[h="111"][t^="111111"],tag[h="111"][t="11111"][o^="1"] { ... }

but frankly, if your tags are just retaining some property that persists in spite of reordering, etc., why not just run a script that selects the last n marked tags on DOM load and assigns the class iamlast, then use the .iamlast CSS selector?