Case Insensitive CSS Attribute Selector


CSS selectors by no means stop to amaze me in how highly effective they are often in matching complicated patterns. Most of that flexibility is in guardian/youngster/sibling relationships, very seldomly in worth matching. Think about my shock once I discovered that CSS permits matching attribute values regardless off case!

Including a {house}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 forth. */
[class=example i] {
  background: lightblue;
}

The use instances for this i flag are seemingly very restricted, particularly if this flag is knew data for you and also you’re used to an ordinary lower-case normal. A free CSS classname normal can have and would proceed to result in issues, so use this case insensitivity flag sparingly!

  • Detect DOM Node Insertions with JavaScript and CSS Animations
  • fetch API

    One of many worst saved secrets and techniques about AJAX on the internet is that the underlying API for it, XMLHttpRequest, wasn’t actually made for what we have been utilizing it for.  We have achieved properly to create elegant APIs round XHR however we all know we are able to do higher.  Our effort to…

  • Create a Simple Slideshow Using MooTools

    One glorious approach so as to add dynamism to any web site is to implement a slideshow that includes photographs or sliding content material. In fact there are quite a few slideshow plugins accessible however a lot of them will be overkill if you wish to do easy slideshow with out controls or occasions.

  • Introducing MooTools ScrollSide

    This put up is a proof of idea put up — the performance is but to be perfected. Image this: you have discovered your self on an internet site that makes use of horizontal scrolling as a substitute of vertical scrolling. It is a creative website so that you settle for that the positioning scrolls left to proper.


Recent Articles

Related Stories

Leave A Reply

Please enter your comment!
Please enter your name here

Stay on op - Ge the daily news in your inbox