Case-sensitive attribute selectors in CSS


I recently came across an odd problem in CSS. The default styling of the <ol> element can’t always be replicated by a stylesheet. This means you might want to be careful with ‘reset’ styling that you won’t later be able to override.

The problem comes when you use the type attribute, which indicates what kind of numbering to use for the list items. You can set it to “1” for the default decimal numbering, or “a” to use letters instead (a, b, c, …), or “i” for roman numerals (i, ii, iii, …).

  <li>Item 1
    <ol type=A>
      <li>Item 1.A</li>
      <li>Item 1.B
        <ol type=i>
          <li>Item 1.B.i</li>
          <li>Item 1.B.ii</li>
          <li>Item 1.B.iii</li>
          <li>Item 1.B.iv</li>

This isn’t purely presentational information. You might have text which refers to list items (“see item 1.B.iv above” or similar) and it will only make sense if the list items are numbered using the right system. So if you change your CSS to use roman numerals for stylistic reasons it’s conceivable that you could be changing the meaning of your content.

You can set the presentation of list numbering in CSS, with the list-style-type property. For example to use lowercase roman numerals:

ol { list-style-type: lower-roman }

But if you want to reset the styling to use the default numbering system based on the type attribute, it won’t work. You’ll have something like this in your CSS:

ol[type="a"] { list-style-type: lower-alpha }
ol[type="A"] { list-style-type: upper-alpha }

ol[type="i"] { list-style-type: lower-roman }
ol[type="I"] { list-style-type: upper-roman }

Unfortunately that won’t work. Well, it will work if you’re serving XHTML with the proper MIME type, because in that case CSS selectors will be case sensitive by default. Usually though HTML and CSS are case insensitive by default, so the rules above which distinguish numbering style based on the case of the type attribute’s value will clash (the second of each pair will override the first).

There is an obscure feature in CSS attribute selectors to change the default, but it only works one way: changing the default for XHTML from case sensitive to case insensitive. You add an “i” after the attribute matching part:

p[class="foo" i] { color: red }

But so far there's no way to go the other way and make the selector case sensitive.

I realize this is about the most who-cares issue in CSS styling. I only came across it when writing a JavaScript demo to show what the different numbering styles of <ol> look like. I had trouble using CSS to style the example output correctly because we’d reset the list-style-type property in our site-wide CSS. In the end I had to kludge it with a style attribute. It’s a rather obscure requirement, but in our upcoming redesign of the Web Design Academy’s websites I’ll try to make sure we don’t over-reset the styling for <ol>.