What Does "I" Mean in a CSS Attribute Selector

What does i mean in a CSS attribute selector?

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>

What does i mean in CSS attribute selectors?

Per https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Adding an i (or I) before the closing bracket causes the value to be compared case-insensitively (for characters within the ASCII range).

So this selector will match type="hidden", type="HIDDEN", etc.

Is the CSS [attribute= value ] Selector unnecessary?

The * in [class*='example'] is a selector that retrieves all elements that contains example in the class-name and not just elements with the class-name example.

So [class*='example'] will target all of the following:

<div class="iamanexample"></div>
<div class="example"></div>
<div class="whereisyourexample"></div>

Whereas .example or [class='example'] will only target the second element <div class="example"></div> from the above three.

Other attribute selectors in CSS includes the:

~ selector: This selector retrieves all elements whose targeted attribute's value contains the exact queried value. This selector can include multiple values in the form of a whitespace-separated list of words.

| selector: This selector retrieves all elements whose targeted attribute's value is exactly the queried value or begins with queried value immediately followed by a hyphen.

^ selector: This selector retrieves all elements whose targeted attribute's value starts with the queried value.

$ selector: This selector retrieves all elements whose targeted attribute's value ends with the queried value.

Check and run the following Code Snippet for a practical example and explanation in the code comments on how each of the above selector works:

/* all elements whose abc value contains "ment" */div[abc*="ment"] { font-weight: 700; }
/* all elements whose abc value is exactly "element-1" */div[abc~="element-1"] { color: blue; }
/* all elements whose abc value is exactly "element" or begins with "element" immediately followed by a hyphen */div[abc|="element"] { background-color: green; }
/* all elements whose abc value starts with "x" */div[abc^="x"] { background-color: red; }
/* all elements whose abc value ends with "x" */div[abc$="x"] { background-color: yellow; }
div { margin: 5px 0px; }

<div abc="element-1">Hello World!</div><div abc="element-2">Hello World!</div>
<div abc="xElement1">Hello World!</div><div abc="xElement2">Hello World!</div>
<div abc="element1x">Hello World!</div><div abc="element2x">Hello World!</div>

CSS attribute selectors

[attr|=value]
Represents an element with an attribute name of attr whose value is a hyphen-separated list of words, one of which is exactly "value". It can be used for language subcode matches.

[attr^=value]
Represents an element with an attribute name of attr and whose value is the prefixed by "value".

Have a look at w3fools

I recommend https://developer.mozilla.org/en-US/docs/CSS/Attribute_selectors and the whole MDN

Why use an attribute selector to match classes?

The [] syntax is an attribute selector.

a[class="btn"]

This will select any <a> tag with class="btn". However, it will not select <a> which has class="btn btn_red", for example (whereas a.btn would). It only exactly matches that attribute.

You may want to read The 30 CSS Selectors you Must Memorize. It's invaluable to any up-and-coming web developer.

CSS difference between attribute selectors with tilde and star?

The asterisk attribute selector *= matches any substring occurrence. You can think of it as a string contains call.

Input	Matches `*=bar`
`foo`	No
`foobar`	Yes
`foo bar`	Yes
`foo barbaz`	Yes
`foo bar baz`	Yes

How to have multiple values inside a CSS tilde attribute selector?

Is the new selector :is

a:is(.logo1, .logo2) {
  background: gold;
}

<ul>
  <li><a href="#internal" id="internal">Internal link</a></li>
  <li><a href="http://example.com" class="logo1">Logo 1</a></li>
  <li><a href="#InSensitive" class="logo2">Logo 2</a></li>
  <li><a href="http://example.org">Example org link</a></li>
  <li><a href="https://example.org">Example https org link</a></li>
  <li><a href="https://temp.org">Example exact match</a></li>
</ul>

CSS attribute selector and case sensitivity with the type attribute vs. made-up attributes

This, and the broader use case of forcing attribute selectors to match case-sensitively, has been addressed by the introduction of a case-sensitive attribute selector flag s:

ol[type='i' s] {
  list-style-type:lower-roman;
}

ol[type='I' s] {
  list-style-type:upper-roman;
}

Now we await implementations...

The HTML spec seems to suggest that the behavior of the type attribute of ol is incorrect, but its use of certain keywords makes this less than 100% clear. Section 4.16.2 uses "must":

Attribute selectors on an HTML element in an HTML document must treat the values of attributes with the following names as ASCII case-insensitive, with one exception as noted in the rendering section:
...
type (except as specified in the rendering section)
All other attribute values and everything else must be treated as entirely case-sensitive for the purposes of selector matching.

And points to section 14.3.8, which uses "expected" as described in the abstract of section 14 (tl;dr: a browser is not necessarily in violation of the spec if it chooses not to follow what is stated as "expected" behavior):

The following rules are also expected to apply, as presentational hints:

@namespace url(http://www.w3.org/1999/xhtml);

ol[type="1"], li[type="1"] { list-style-type: decimal; }
ol[type=a], li[type=a] { list-style-type: lower-alpha; }
ol[type=A], li[type=A] { list-style-type: upper-alpha; }
ol[type=i], li[type=i] { list-style-type: lower-roman; }
ol[type=I], li[type=I] { list-style-type: upper-roman; }
ul[type=none i], li[type=none i] { list-style-type: none; }
ul[type=disc i], li[type=disc i] { list-style-type: disc; }
ul[type=circle i], li[type=circle i] { list-style-type: circle; }
ul[type=square i], li[type=square i] { list-style-type: square; }

In the above style sheet, the attribute selectors for the ol and li elements are expected to be treated as case-sensitive.

Given that the expected behavior as described in the latter is more in line with author expectations than actual browser behavior, I'm going to say that this is indeed incorrect behavior despite the permissiveness of the word "expected".

CSS Attribute selector begins with without an attribute name

Can this be done without an attribute name?

While the answer isn't too pretty, the short of it is no, it can't - not in the way you're suggesting.

References:

W3 Attribute Selectors Specification

[att]
Represents an element with the att attribute, whatever the value of the attribute.

[att=val]
Represents an element with the att attribute whose value is exactly "val".

[att~=val]
Represents an element with the att attribute whose value is a whitespace-separated list of words, one of which is exactly "val". If "val" contains whitespace, it will never represent anything (since the words are separated by spaces). Also if "val" is the empty string, it will never represent anything.

[att|=val]
Represents an element with the att attribute, its value either being exactly "val" or beginning with "val" immediately followed by "-" (U+002D). This is primarily intended to allow language subcode matches (e.g., the hreflang attribute on the a element in HTML) as described in BCP 47 ([BCP47]) or its successor. For lang (or xml:lang) language subcode matching, please see the :lang pseudo-class.

W3 General Selectors Specification

The following table summarizes the Selector syntax:

...

[Provides documentation of all valid selectors, omitting any mention of wildcard attribute selectors]

...

Do values in CSS attribute selector values need to be quoted?

TLDR: Quotes are required unless the value meets the identifier specification for CSS2.1

The CSS spec might say they are optional, but the real world presents a different story. When making a comparison against the href attribute you will need to use quotes (single or double work in my very limited testing - latest versions of FF, IE, Chrome.)

~~Interestingly enough the css spec link referenced by @Pekka happens to use quotes around their href-specific examples.~~

And it's not just due to non-alpha characters like the period or slashes that give this unique situation a quote requirement - using a partial match selector ~= doesn't work if you just use the "domain" in "domain.com"

Ok, every answer here is wrong (including my own previous answer.) The CSS2 spec didn't clarify whether quotes are required in the selector section itself, but the CSS3 spec does and quotes the rule as a CSS21 implementation:

http://www.w3.org/TR/css3-selectors/

Attribute values must be CSS identifiers or strings. [CSS21] The case-sensitivity of attribute names and values in selectors depends on the document language.

And here is the identifier info:

http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".

My answer seemed correct but that's because the '~=' is a white-space selector comparator so it will never match a partial string inside an href value. A '*=' comparator does work however. And a partial string like 'domain' does work for matching href='www.domain.com'. But checking for a full domain name would not work because it violates the identifier rule.

What Does "I" Mean in a CSS Attribute Selector