[low-pri] Reported attribute selector specificity depends on whether or not the selector is closed

[mathiasbynens]

Awesome project and blog post! I look forward to your Almanac research and its results 👍

What follows is likely not common usage, and not observable in pure CSS, but I figured I’d report the inconsistency anyway, in case it reveals a more fundamental bug.

The selector

[foo='bar

has specificity:

0,0,2

But

[foo='bar']

has specificity:

0,1,0

Note that these behave the same when used through document.querySelector.

(Side note: it would be awesome to be able to hotlink to https://projects.verou.me/parsel/ with a given input, perhaps through the hash in the URL?)

[LeaVerou]

Thanks! I had no idea document.querySelector() accepts unclosed attribute selectors! Do they work in regular CSS?
And yeah, I can see how that would be parsed incorrectly, since the regex for parsing attribute selectors requires a closing bracket.

And yeah, I agree it would be lovely to be able to hotlink to specific input, but I'm way too busy rn to code it. I would welcome a PR however!

[umutbozdag]

Hello! I can try to achieve hotlinking to specific input by using a query string like ?selector=#foo:not(.okay)

What do you guys think about it?

[mathiasbynens]

Thanks! I had no idea document.querySelector() accepts unclosed attribute selectors! Do they work in regular CSS?

I'm not sure, but it doesn't look like it. Closed:

data:text/html,<style>%5Bfoo='bar%20%7B%20outline%3A%201px%20solid%20red;%20width%3A%20100px;%20height%3A%20100px;%20%7D</style><p%20foo=bar>

Unclosed:

data:text/html,<style>%5Bfoo='bar%20%7B%20outline%3A%201px%20solid%20red;%20width%3A%20100px;%20height%3A%20100px;%20%7D</style><p%20foo=bar>

Interestingly, this kind of thing does work:

<style>html { outline: 1px solid red; width: 100px; height: 100

URL:

data:text/html,<style>html { outline%3A%201px%20solid%20red;%20width%3A%20100px;%20height%3A%20100

[LeaVerou]

@umutbozdag Sounds good, thank you! Just make sure to use the History API to update the URL (with replaceState, so that it doesn't clog the history) when the input changes, to make it easier to share selectors!

[jrandolf]

I'm not sure whether selector specificity due to invalid selectors would be an expected feature. In particular, the parse typically throws if something cannot be parsed correctly (robust it may be, incorrect CSS is incorrect CSS ;)). This issue seems to have turned into an issue about hotlinking though, so I'm closing this.