By default, CSS attribute selectors are case-sensitive. It means that a[href$=".png"] has effect with the links whose extensions are .png only.
Imagine that you're building a files management application. It would add an icon to a file based on its extension. For example, the following CSS inserts an icon to any .png file.
a[href$=".png"]:after {
content: url(/img/png.svg);
}In reality, the files are uploaded by the users and we can't control the file extensions. A png file can be named as .png, .PNG, .pNG.
In order to accept all of these variants, we can add i right before ] in the selector.
a[href$=".png" i]:after {
content: url(/img/png.svg);
}More
