CSS: Case Sensitivity

By Xah Lee. Date: . Last updated: .

CSS Selector for HTML attribute values

case-sensitive 🔴

/* the two selectors are different */

.bb { color: red; }

.BB { color: red; }

CSS Selector for class values

case-sensitive 🔴

CSS Selector for HTML tag names

case-insensitive 🟢

div { color: red; }
/* is same as */
DIV { color: red; }

CSS Selector for HTML attribute names

case-insensitive 🟢

input[type="text"] { color: red; }

/* same as */

input[TYPE="text"] { color: red; }

CSS property names

case-insensitive 🟢

CSS keywords

case-insensitive 🟢

Standard keywords like none, auto, and block.

CSS function names

case-insensitive 🟢

CSS function names, like calc or rgb.

At-rules

At-rules, like @media or @import.

case-insensitive 🟢