| category | created | tags | title |
|---|---|---|---|
Tip |
2021-03-23 |
CSS |
Ignore case sensitivity in a CSS attribute selector |
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(/assets/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(/assets/png.svg);
}