CSS Selector Level 4 » Attribute case-sensitivity

The attribute case-sensitivity selector is mostly equivalent to the CSS2 attribute selector but with the difference to be case-insensitive within the ASCII range. It selects an element using the given attribute value in case-insensitive mode. By default the selector is case-sensitive but it depends on the document language.

Syntax

Copy
[attribute="value" i] {
    /* declarations */
}

Example

Copy
a[href$="pdf" i] {
    color: red;
}

Here it's possible to select all links which have a href attribute with the exact ending pdf but not the value endings PDF or pDf.

Try example in CodePen

Browser support

Platform Chrome Firefox Safari Edge Internet Explorer Opera
Desktop Yes (49) Yes (47) Yes (9) No No Yes (36)
Mobile Yes (59) Yes (54) Yes (9.2) No No Yes (37)

Usage statistics (Alexa Top 1,250,000 sites)


Please wait a moment, the comments start loading now...
explorermozillachromesafariopera