What does “i” mean in a CSS attribute selector?

by

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.

More Related Contents:

  1. how do I make device specific selectors in css [closed]
  2. Is there a “previous sibling” selector?
  3. What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB?
  4. CSS selector for first element with class
  5. What does the “+” (plus sign) CSS selector mean?
  6. Is there a CSS selector by class prefix?
  7. How do I select an element based on the state of another element in the page with CSS?
  8. Does the order of classes listed on an item affect the CSS?
  9. Select all child elements recursively in CSS
  10. CSS “and” and “or”
  11. Using the last-child selector
  12. Why doesn’t the selector h3:nth-child(1):contains(‘a’) work?
  13. What is the difference between :focus and :active?
  14. IE8 :nth-child and :before
  15. CSS selector to select first element of a given class
  16. How to select label for=”XYZ” in CSS?
  17. CSS: styled a checkbox to look like a button, is there a hover?
  18. In which direction do selector engines read, exactly?
  19. CSS Selector for
  20. What’s the difference between html[lang=”en”] and html:lang(en) in CSS?
  21. Can I colour backgrounds of selected items in HTML select options with CSS only?
  22. CSS3 combining selectors with OR instead of AND
  23. Why doesn’t this CSS :not() declaration filter down?
  24. Should I use single colons (:) or double colons (::) for before, after, first-letter and first-line pseudo-elements?
  25. How to show the first N elements of a block and hide the others in css?
  26. What is the difference between :before and ::before?
  27. What CSS selector can be used to select the first div within another div
  28. CSS Selector for not a child of element type?
  29. :last-child pseudo-class mixed with attribute selector not working
  30. CSS selector based on width?

Leave a Comment