What does "i" mean in a CSS attribute selector?

css, css-selectors

Solution

As mentioned in the comments, it is for case-insensitive attribute matching. This is a new feature in CSS Selectors Level 4.

Presently it is available in Chrome 49+, Firefox 47+, Safari 9+, and Opera 37+*. Prior to this it was only available in the Chrome user-agent styles starting around Chrome 39, but could be enabled for web content by setting the experimental features flag.

* Earlier versions of Opera may also support it.

Working Example / Browser Test:

[data-test] {
    width: 100px;
    height: 100px;
    margin: 4px;
}

[data-test="A"] {
    background: red;
}

[data-test="a" i] {
    background: green;
}

Green if supported, red if not:

<div data-test="A"></div>

The above square will be green if the browser supports this feature, red if it does not.

Problem

I have found the following CSS selector in the Google Chrome user agent stylesheet: ``` [type="checkbox" i] ``` What does the `i` mean?

Original source