← #110 Use Array.includes for multiple conditionals
#111

Ignore case sensitivity in a CSS attribute selector

Topics: CSS

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

Fix a typo or suggest an improvement
#112 Combine styles with the :is pseudo-class selector