what does "i" in square brackets do in CSS selector?

Question

I just discovered this selector in chrome developer console as an "user agent stylesheet":

input[type="radio" i], input[type="checkbox" i] { ... }

what does the "i" do? I've never seen such construction in selector before.

Thanks.

Answer 1

This is the Case-Sensitive Attribute Selector which has been introduced in the Selectors Level 4 working draft:

E[foo="bar" i]
An E element whose foo attribute value is exactly equal to any (ASCII-range) case-permutation of bar.

6.3. Case-sensitivity

By default case-sensitivity of attribute names and values in selectors depends on the document language. To match attribute values case-insensitively regardless of document language rules, the attribute selector may include the identifier i before the closing bracket (]). When this flag is present, UAs must match the attribute's value case-insensitively within the ASCII range.

Example 13

The following rule will style the frame attribute when it has a value of hsides, whether that value is represented as hsides, HSIDES, hSides, etc. even in an XML environment where attribute values are case-sensitive.

[frame=hsides i] { border-style: solid none; }

It's worth noting that browser support for this at present will be very poor if not non-existent. Existing CSS implementations which do make use of this selector are possibly using external JavaScript libraries to imitate the Selectors Level 4 definition(s).