CSS [attribute operator value i] Selector

CSS [attribute operator value i] Selector

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The [attribute operator value i] selector is a CSS attribute selector that targets elements based on the presence of a specific attribute, where the attribute's value matches a given string case-insensitively. Unlike the basic attribute selector <code>[attribute=value]</code>, which performs a case-sensitive match, this selector ignores the difference between uppercase and lowercase characters. This behavior is particularly useful when dealing with attributes in HTML that are defined as case-insensitive, such as the lang attribute or certain data attributes. For example, [lang="en" i] would match both <html lang="en"> and <html lang="EN">.

This selector can be combined with other attribute operators like =, ~=, |=, ^=, $=, and *= to perform more specific matches. For instance, [data-status^="active" i] would select any element whose data-status attribute begins with the word "active", regardless of capitalization, such as <div data-status="ActiveUser"> or <div data-status="active-member">. When combined with other selectors, such as the .class selector or element tags, it allows developers to target elements with a high degree of specificity.

One practical use of [attribute operator value i] is in styling forms or accessibility features, where attribute values may vary in case due to user input or differing conventions. For example, [type="text" i] will select <input type="TEXT"> as well as <input type="text">. This ensures consistent application of CSS properties such as color or background-color without the need for additional classes or JavaScript-based manipulation.

In summary, [attribute operator value i] is essential when you need case-insensitive matching of attribute values, providing flexibility and reliability in CSS rules for elements whose attributes may not follow consistent casing. It can significantly simplify styling scenarios where exact case matching would otherwise lead to missing elements or inconsistent styles.

Syntax

[attribute=value s] { css declarations; }

Example

HTML

<ul class="file-list">

  <li><a href="#" title="company-sop">Standard Operating Procedures (Lowercase)</a></li>

  <li><a href="#" title="COMPANY-SOP">Standard Operating Procedures (Uppercase)</a></li>

  <li><a href="#" title="employee-handbook">Employee Handbook</a></li>

</ul>

CSS

/* Syntax breakdown:

  [title     <- Look for the title attribute

  *=         <- That contains the string...

  "sop"      <- "sop"

  i]         <- Case-insensitively

*/



a[title*="sop" i] {

  color: #d9534f;

  font-weight: bold;

  text-transform: uppercase;

  border: 1px solid #d9534f;

  padding: 2px 5px;

  text-decoration: none;

}



li {

  margin-bottom: 10px;

}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS [attribute operator value i] selector. Hover over a browser icon to see the version that first introduced support for this selector.