How can I apply CSS selector to attribute values being case sensitive?
css, css-selectors, html
Solution
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.
Problem
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.