21.2 C
New York
Tuesday, October 22, 2024

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 guardian/little one/sibling relationships, very seldomly in worth matching. Take into account my shock once I realized 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 probably very restricted, particularly if this flag is knew information for you and also you’re used to a regular lower-case commonplace. A unfastened CSS classname commonplace could have and would proceed to result in issues, so use this case insensitivity flag sparingly!

  • Create Namespaced Classes with MooTools

    MooTools has at all times gotten a little bit of grief for not inherently utilizing and standardizing namespaced-based JavaScript courses just like the Dojo Toolkit does.  Many builders create their courses as globals which is usually frowned up.  I largely disagree with that stance, however every to their very own.  In any occasion…

  • CSS Filters

    CSS filter help not too long ago landed inside WebKit nightlies. CSS filters present a technique for modifying the rendering of a primary DOM aspect, picture, or video. CSS filters enable for blurring, warping, and modifying the colour depth of components. Let’s have…

  • Google Extension Effect with CSS or jQuery or MooTools JavaScript

    Each of the 2 nice browser distributors, Google and Mozilla, have Extensions pages that make the most of easy however elegant animation results to reinforce the web page. One of many extensions utilized by Google is a primary margin-top animation to modify between two panes: a graphic pane…

  • Record Text Selections Using MooTools or jQuery AJAX

    One method I am seeing increasingly lately (CNNSI.com, for instance) is AJAX recording of chosen textual content. It is smart — for those who detect customers deciding on the phrases again and again, you may in all probability assume your guests are looking out that time period on Google…


Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest Articles