Menu
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?
346
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.
163
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
