CSS selectors cannot match numerical attribute values? why?

Question

I have set up a simple test page to illustrate the problem I have encountered. Briefly, this works as expected (text is formatted in bold, underlined red):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <style>
            [abc=x1] {
                color: red;
                text-decoration: underline;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <div abc=x1>hello</div>
    </body>
</html>

And this does not (text stays black, no formatting applied):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <style>
            [abc=1] {
                color: red;
                text-decoration: underline;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <div abc=1>hello</div>
    </body>
</html>

The only thing I changed between the two examples is the attribute value (in both the CSS and HTML) from x1 to 1.

So it seems that you cannot match against numerical attributes.

Does anyone have any idea why this... very... useful... feature... exist?

alex · Accepted Answer · 2011-06-06T02:12:19.173

13

Wrap the string to match in quotes...

[abc="1"] {
    ...
}

jsFiddle.

Attribute values must be CSS identifiers or strings.

Source.

When you wrap it in quotes, you are telling it to match a string.

When you don't quote it, it is looking for an identifier.

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit.

edited Jun 06 '11 at 02:12

answered Jun 06 '11 at 02:07

alex

479,566
201
878
984

Thanks. Sorry, I don't know how I could miss this!! I thought I had tested it with quotes but I must have skipped something while trying it out with quotes. I don't like it when it happens, I am humbled and thankful for you and others pointing this out to me. – Rolf Jun 06 '11 at 09:53
And note that the key (in this case: `abc`) cannot be quoted or it will give an identical error in the JavaScript console: "Document.querySelectorAll: `button["data-rating"="1"]` is not a valid selector". – Luc Feb 02 '23 at 01:58

Saurabh Gokhale · Answer 2 · 2011-06-06T12:41:12.510

3

It works with "" quotes around the string.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <style>
            [abc="1"] {
                color: red;
                text-decoration: underline;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <div abc="1">hello</div>
    </body>
</html>

edited Jun 06 '11 at 12:41

answered Jun 06 '11 at 02:07

Saurabh Gokhale

53,625
36
139
164

score 1 · Answer 3 · edited May 23 '17 at 12:06

You are correct in realizing an attribute cannot begin with a number.

Why it may work correctly in some browsers, it likely should not.

I think the answer to this is similar to why a variable, in most languages, cannot begin with a number. (Why can't variable names start with numbers?)

"Because then a string of digits would be a valid identifier as well as a valid number"

I would also see this answer for more on the answer of why: Can XHTML and HTML class attributes value start with a number?

but, to me this a combination of historical consequences relating back to SGML and the lexers that parse and render the HTML and CSS.

score 1 · Answer 4 · answered Jun 06 '11 at 02:46

Html attributes are strings. The problem likely arises with how the css interpreter interprets an unquoted number. It would recognize it as a number and not a string, so it could never match a string value of an html attribute.

You the would need to enclose the value you are searching for in quotation marks so that it is correctly interpreted as a string, as has been previously suggested. If the value starts with a non-numeric character, it would be tokenized as a string, which is why the first example works.

http://www.w3.org/TR/CSS2/selector.html#attribute-selectors

CSS selectors cannot match numerical attribute values? why?

4 Answers4

Linked