How can I apply CSS selector to attribute values being case sensitive?

Question

If CSS and HTML are both case-insensitive languages(*), and the W3C says

The case-sensitivity of attribute names and values in selectors depends on the document language.

How can I reconcile that with attribute values being case sensitive in selectors? For instance,

div[title=TITLE] {color:green}

does not make the text green for this HTML:

<div title="title">This is a div</div>

Fiddle here .

Is this a bug in the browser? And when I say "the browser", I mean all of them. Or am I looking at an unfinished version of the CSS3 specs? Which would be strange, as the same line of text was also in the CSS2 specs here .

_{(*) except for some features that are explicit exceptions, like class and ID names. Note that this example does not have class or ID names.}

Answer 1

You answered your own question:

The case-sensitivity of attribute names and values in selectors depends on the document language.

But further, I believe it is because to the browser, it and IT are not the same string. They are two different things to the browser.

EDIT--- You brought up something good in your comment. Let me explain: The HTML/CSS parser reads HTML and CSS as case-insensitive. That is because they are. But attributes are not, because they are defined by the user. So, it reads them as case-sensitive. Basically, HTML and CSS are standardized. Attributes are not.

EDITED AGAIN--- HTTP methods are standardized, (I Think) thus making it not necessary for them to be case-sensitive.

Answer 2

HTML5 actually contains an entire section dedicated to case-sensitivity for the purposes of selector matching. Here's what it says about attribute names and values:

Attribute and element names of HTML elements in HTML documents must be treated as ASCII case-insensitive for the purposes of selector matching.

Everything else (attribute values on HTML elements, IDs and classes in no-quirks mode and limited-quirks mode, and element names, attribute names, and attribute values in XML documents) must be treated as case-sensitive for the purposes of selector matching.

Of course, HTML 4 does not state anything about interop with selectors, but it does say that the title attribute in particular is case-sensitive . Since selectors depend on the document language for determining case-sensitivity, there is no difference here.

XHTML follows the same set of rules as XML does: all attribute values should be case-sensitive, so a selector must follow that case-sensitivity. Again, no difference.

So what you're seeing is entirely by design; there is no browser or spec issue.

Answer 3

Strings in attribute selectors are matched case-sensitively in HTML, and that's pretty much that. I don't know why they wouldn't be – take name for example. name="foo" and name="FoO" get sent to the server differently, after all. Even id s are case-sensitive if you want them to be; this works fine and validates, and it seems like it should according to the spec (but I wouldn't trust it to work everywhere).

See the specification (the relevant bit is in HTML's spec, not CSS's):

The Selectors specification leaves the case-sensitivity of IDs, classes, element names, attribute names, and attribute values to be defined by the host language. [SELECTORS]

The unique identifier of HTML elements in documents that are in quirks mode must be treated as ASCII case-insensitive for the purposes of selector matching.

Classes from the class attribute of HTML elements in documents that are in quirks mode must be treated as ASCII case-insensitive for the purposes of selector matching.

When comparing a CSS element type selector to the names of HTML elements in HTML documents, the CSS element type selector must first be converted to ASCII lowercase. The same selector when compared to other elements must be compared according to its original case. In both cases, the comparison is case-sensitive.

When comparing the name part of a CSS attribute selector to the names of namespace-less attributes on HTML elements in HTML documents, the name part of the CSS attribute selector must first be converted to ASCII lowercase. The same selector when compared to other attributes must be compared according to its original case. In both cases, the comparison is case-sensitive.

Everything else (attribute values on HTML elements, IDs and classes in no-quirks mode and limited-quirks mode, and element names, attribute names, and attribute values in XML documents) must be treated as case-sensitive for the purposes of selector matching.

Answer 4

Some newer browsers support this syntax

div[title=TITLE i] { color:green; }

or

div[title=TITLE I] { color:green; }

which both match this DIV:

<div title="title">This is a div</div>

Note : Support: version : Chrome >= 49.0, Firefox (Gecko) >= 47.0, Safari >= 9