[selectors] Selecting elements that use a specific default cursor

[RealHypnoticOcelot]

Current Approach

As I write this, there are 36 predefined cursors in the CSS spec. It's currently possible to overwrite cursors like so:

.selector {
	cursor: pointer;
}

Which requires knowing exactly what elements you want to overwrite the cursor on.

What if, though, you want to replace the default cursors for their respective contexts(e.g. replacing all instances of the pointer cursor with a custom PNG image)? As of now, you'd have to essentially implement the same logic a UA would use to determine what cursor to show, which would be tedious and difficult to maintain.

Solution: :cursor-type()

What if there was some pseudo-class like this:

*:cursor-type(pointer) {
	cursor: url("data:image/...");
}

Where cursor-type returns elements whose default cursor, according to the UA, would be pointer?

Is there some reason this doesn't exist already? Sites that use a custom cursor, from what I've seen, have had to use some pretty ugly and specific CSS rules for the cursor, which make the cursor overall less responsive.

Alternative Solutions

1. Having a CSS property for each predefined cursor, e.g.:

* {
	cursor-pointer: url("data:image/...");
	cursor-wait: url("data:image/...");
	cursor-text: url("data:image/...");
}

(The issue with this approach is that it would have the same level of specificity as the standard cursor property, which I believe would make it harder to include a catch-all fallback cursor.)

2. It might also be possible to implement some sort of spritesheet-type format for cursors, which would probably require a whole new spec and is likely out of the scope of the CSS WG.

Please let me know what you think!