118

I have found the following CSS selector in the Google Chrome user agent stylesheet:

[type="checkbox" i]

What does the i mean?

13
  • 1
    @Alexander O'Mara: Selectors level 4 is part of CSS3 - it is just the next level of a module that started out at level 3. "CSS4" is a misnomer.
    – BoltClock
    Feb 15, 2015 at 4:14
  • 2
    @Alexander O'Mara: I would love to see it brought up on meta. In particular I'd like to know how we can handle the use of the [css4] tag - the most drastic measure I could take is make it a synonym of [css3], and that would actually be the right thing to do.
    – BoltClock
    Feb 15, 2015 at 4:18
  • 1
    @BoltClock Meta Question is up! BTW, when you ask about merging your answer with this question, did you mean edit the question/answer here to add the information, or were you referring to a magic move-an-answer-to-another-question button? Feb 15, 2015 at 5:02
  • 1
    @Alexander O'Mara: Not moving individual answers, but combining two entire questions. It's a mod-only function.
    – BoltClock
    Feb 15, 2015 at 5:02
  • 1
    @TylerH We have a discussion on Meta on this topic. Feel free to add to the discussion there. Feb 25, 2015 at 5:48

2 Answers 2

137

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.

6
  • 6
    Thanks for teaching! Enjoy your new hat. Does this sort of thing work in selector libraries? What sort of browser support does it have? Dec 16, 2014 at 14:47
  • 1
    @BenjaminGruenbaum It looks like it's only available in Chrome user-agent styles (not a website's CSS, at least not yet). I could not find any official compatibility documentation. Dec 16, 2014 at 14:50
  • (Reposting my earlier comment now that the questions are merged.) It's not entirely surprising that brand new, experimental standards such as this are poorly documented. That said, my answer contains some more information on this, namely how it works, why it is used, and how it is implemented in Chrome (as given by the question).
    – BoltClock
    May 27, 2015 at 16:36
  • Chrome will add support for this in version 49.0 (currently in Beta), Firefox in version 47.0 (scheduled to be released in June 2016). Source: developer.mozilla.org/en-US/docs/Web/CSS/…
    – Miscreant
    Feb 10, 2016 at 11:26
  • 1
    @LWChris: I'm not sure any such browser actually exists. IE6 doesn't understand attribute selectors at all, and IE7 supports them even with custom data attributes.
    – BoltClock
    Mar 26, 2018 at 16:55
36

That is the case-insensitive flag for attribute selectors, introduced in Selectors 4. Apparently they snuck an implementation of this feature into Chrome as early as August 2014.

In a nutshell: this flag tells the browser to match the respective values for the type attribute case-insensitively. The default selector matching behavior for attribute values in HTML is case-sensitive, which is often undesirable because many attributes are defined to have case-insensitive values, and you want to make sure your selector picks up all the right elements regardless of case. type is one example of such an attribute, because it is an enumerated attribute, and enumerated attributes are said to have case-insensitive values.

Here are the relevant commits:

  • 179370 — implementation
  • 179401 — changes to UA stylesheets as shown in the screenshot in the question

Note that it's currently hidden within the "Enable experimental Web Platform features" flag, which you can access at chrome://flags/#enable-experimental-web-platform-features. This might explain why the feature went largely unnoticed — features hidden behind that flag can only be used internally and not in public-facing code (such as author stylesheets) unless it is enabled, because they are experimental and therefore not ready for production use.

Here's a test case that you can use — compare the results when the flag is enabled and disabled:

span[data-foo="bar"] {
    color: red;
}

span[data-foo="bar" i] {
    color: green;
}
<span data-foo="bar">If all of this text is green,</span>
<span data-foo="Bar">your browser supports case-insensitive attribute selectors.</span>

Note that I use a custom data attribute instead of type to show that it can be used with just about any attribute.

I am not aware of any other implementations as of this writing, but hopefully other browsers will catch up soon. This is a relatively simple but extremely useful addition to the standard and I look forward to being able to use it in future.

3
  • I'm having "that afternoon" fatigue... After reading the W3 spec im still not understanding completely, what would be a practical real life usage in css for this ?
    – Matt
    Jan 20, 2015 at 16:41
  • 2
    @Matt: Attribute selector matching is case-sensitive as stated in HTML5, which in many cases is undesirable because HTML5 allows case-insensitive values for certain attributes. You can use this flag to ensure you pick up the right elements regardless of case. For example in the screenshot you can see that it looks for input[type="search" i], which will match elements like <input type="SEARCH">.
    – BoltClock
    Jan 20, 2015 at 16:50
  • 1
    I can confirm it working with Chromium Version 43.0.2357.130 and “Enable experimental Web Platform features” enabled. Aug 15, 2015 at 16:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.