Case Insensitive CSS Attribute Selector
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!
![Responsive Images: The Ultimate Guide]()
Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...
![CSS vs. JS Animation: Which is Faster?]()
How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps?
This article serves as a point-by-point...
![Custom Scrollbars in WebKit]()
Before each of the browser vendors we like was providing unique CSS controls, Internet Explorer was setting the tone. One such example is IE's early implementation of CSS filters. Internet Explorer was also the first browser that allowed developers to, for better or worse, customize...
![Fading Links Using jQuery: dwFadingLinks]()
UPDATE: The jQuery website was down today which caused some issues with my example. I've made everything local and now the example works.
Earlier this week, I posted a MooTools script that faded links to and from a color during the mouseover and mouseout events.
I just used this in JavaScript to find elements based on title attributes:
let testEntries = document.querySelectorAll('[title^="${search}" i]');Exactly what I was looking for, thanks!