Sunday, July 21, 2024
HomeJavaScriptCase Insensitive CSS Attribute Selector

Case Insensitive CSS Attribute Selector

CSS selectors by no means stop to amaze me in how highly effective they are often in matching advanced patterns. Most of that flexibility is in father or mother/youngster/sibling relationships, very seldomly in worth matching. Take into account my shock after I discovered that CSS permits matching attribute values regardless off case!

Including a {area}i to the attribute selector brackets will make the attribute worth search case insensitive:

/* case delicate, solely matches "instance" */
[class=example] {
  background: pink;

/* case insensitive, matches "instance", "eXampLe", and so on. */
[class=example i] {
  background: lightblue;

The use instances for this i flag are probably very restricted, particularly if this flag is knew information for you and also you’re used to a typical lower-case customary. A free CSS classname customary may have and would proceed to result in issues, so use this case insensitivity flag sparingly!

  • Serving Fonts from CDN

    For optimum efficiency, everyone knows we should put our belongings on CDN (one other area).  Together with these belongings are customized net fonts.  Sadly customized net fonts through CDN (or any cross-domain font request) do not work in Firefox or Web Explorer (accurately so, by spec) although…

  • Responsive and Infinitely Scalable JS Animations

    Again in late 2012 it was not simple to search out open supply initiatives utilizing requestAnimationFrame() – that is the hook that permits Javascript code to synchronize with an online browser’s native paint loop. Animations utilizing this methodology can run at 60 fps and ship improbable…

  • pointer Media Query

    As extra units emerge and variations in system interplay are carried out, the extra vital good CSS code will turn out to be.  In an effort to write good CSS, we want some indicator about system capabilities.  We have used CSS media queries so far, with checks for max-width and pixel ratios.

  • Build a Toggling Announcement Slider Using MooTools 1.2

    Just a few of my buyer have requested for me to create a refined however dynamic (…I do know…) method for them to promote totally different specials on their web site. Not one thing that might show on each web page, however periodically or solely the homepage. Utilizing a trick…



Please enter your comment!
Please enter your name here

Most Popular

Recent Comments