Case Insensitive CSS Attribute Selector

Date:

Share post:

CSS selectors never cease to amaze me in how powerful they can be in matching complex patterns. Most of that flexibility is in parent/child/sibling relationships, very seldomly in value matching. Consider my surprise when I learned that CSS allows matching attribute values regardless off case!

Adding a {space}i to the attribute selector brackets will make the attribute value search case insensitive:

/* case sensitive, only matches "example" */
[class=example] {
  background: pink;
}

/* case insensitive, matches "example", "eXampLe", etc. */
[class=example i] {
  background: lightblue;
}

The use cases for this i flag are likely very limited, especially if this flag is knew knowledge for you and you’re used to a standard lower-case standard. A loose CSS classname standard will have and would continue to lead to problems, so use this case insensitivity flag sparingly!

Request Metrics real user monitoring

Source link
spot_img

Related articles

Matrix Push C2 Uses Browser Notifications for Fileless, Cross-Platform Phishing Attacks

Bad actors are leveraging browser notifications as a vector for phishing attacks to distribute malicious links by means...

The New Framework Laptop 16 Has An Upgradable GPU!

A Big Change From The FrameWork Laptop 13 Ars Technica got their hands on the all new FrameWork Laptop...

Fragments Nov 19

I’ve been on the road in Europe for the last couple of weeks, and while I was there...

Logitech Promo Code: $25 Off This Holiday Season

A leader in almost everything tech and home-office related for over 40 years, Swiss-founded Logitech offers a vast...