Case Sensitivity

CSS is case insensitive in all matters under its control; however, some things, such as the document markup language, are beyond its control. HTML is case insensitive in most respects, except when it comes to certain attribute values, like the id and class attributes. XHTML, being XML, is always case sensitive.

This means that the CSS element type selectors for an HTML document are case insensitive, though they’re case sensitive for XHTML, as this example shows:1

h1 {
  font-size: 150%;
}
H1 {
  color: red;
}

The first rule will apply to all level-one headings in HTML (even if the tags are written as <H1>…</H1> in HTML) and XHTML.

The second rule will apply to all level-one headings in HTML, even if the tags are written as <h1>…</h1>. It won’t apply to any heading element in an XHTML document.

In attribute selectors for HTML documents, attribute names and some attribute values are case insensitive, while other attribute values—most notably the attributes id and class—are case sensitive. As these attributes are case sensitive in HTML, ID selectors and class selectors must always match the case of the id and class attribute values in the document. To find out which attribute values are case sensitive and which aren’t, consult the HTML specification.

This issue is further complicated by the fact that browser behavior is inconsistent. For example, in Internet Explorer 6, id and class attribute values are only case sensitive in standards mode. In Safari 3 and earlier versions, attribute selectors are always case insensitive for HTML documents.

Since all attribute names and values are case sensitive in XHTML, selectors are always case sensitive.

The simplest way to mitigate any potential issues surrounding case sensitivity is to always use lowercase for everything in your markup and CSS, where possible. If that’s not possible, make sure the case you use is consistent between your CSS and your document markup.

Footnotes

1 All XHTML tags and attribute names (and some values) must be written in lowercase.

User-contributed notes

There are no comments yet.

Related Products