{"id":1269,"date":"2025-04-11T17:44:27","date_gmt":"2025-04-11T17:44:27","guid":{"rendered":"https:\/\/techtrendfeed.com\/?p=1269"},"modified":"2025-04-11T17:44:29","modified_gmt":"2025-04-11T17:44:29","slug":"case-insensitive-css-attribute-selector","status":"publish","type":"post","link":"https:\/\/techtrendfeed.com\/?p=1269","title":{"rendered":"Case Insensitive CSS Attribute Selector"},"content":{"rendered":" \r\n<br><div id=\"main\"><article itemscope=\"\" itemtype=\"http:\/\/schema.org\/Article\">\n<p>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 dad or mum\/baby\/sibling relationships, very seldomly in worth matching.  Think about my shock after I discovered that CSS permits matching attribute values regardless off case! <\/p>\n\n\n\n<p>Including a <code>{house}i<\/code> to the attribute selector brackets will make the attribute worth search case insensitive:<\/p>\n\n\n\n<pre class=\"css\">\n\/* case delicate, solely matches \"instance\" *\/\n[class=example] {\n  background: pink;\n}\n\n\/* case insensitive, matches \"instance\", \"eXampLe\", and so on. *\/\n[class=example i] {\n  background: lightblue;\n}\n<\/pre>\n\n\n\n<p>The use circumstances for this <code>i<\/code> flag are doubtless very restricted, particularly if this flag is knew data for you and also you&#8217;re used to a normal lower-case normal.  A free CSS classname normal can have and would proceed to result in issues, so use this case insensitivity flag sparingly!<\/p>\n\n\n\n<div class=\"x x-long x-secondary\">\n    \n    \n    <div class=\"x-secondary-large\">\n    <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/requestmetrics.com\/?utm_source=davidwalsh\" style=\"display:block;\">\n        <img decoding=\"async\" src=\"https:\/\/davidwalsh.name\/demo\/rm_perf_banner-728.min.svg\" style=\"max-width:100%;height:auto;\" alt=\"Request Metrics real user monitoring\" loading=\"lazy\" width=\"728\" height=\"90\"\/>\n    <\/a>\n    <\/div>\n    <div class=\"x-secondary-small\">\n    <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/requestmetrics.com\/?utm_source=davidwalsh\" style=\"display:block;\">\n        <img decoding=\"async\" src=\"https:\/\/davidwalsh.name\/demo\/rm_perf_block_300.min.svg\" style=\"max-width:100%;height:auto;\" alt=\"Request Metrics real user monitoring\" loading=\"lazy\" width=\"300\" height=\"250\"\/>\n    <\/a>\n    <\/div>\n<\/div>\n\n\n\n\n\n<\/article>\n\n<div class=\"article-block\" style=\"min-height:90px\"><div class=\"x x-long x-terciary\" style=\"max-height: none;\">\n  \n    \n    \n<div class=\"x-secondary-large\">\n  <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/requestmetrics.com\/?utm_source=davidwalsh\" style=\"display:block;\">\n    <img decoding=\"async\" src=\"https:\/\/davidwalsh.name\/demo\/rm_perf_banner-728.min.svg\" style=\"max-width:100%;height:auto;\" alt=\"Request Metrics real user monitoring\" loading=\"lazy\" width=\"728\" height=\"90\"\/>\n  <\/a>\n<\/div>\n<div class=\"x-secondary-small\">\n  <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/requestmetrics.com\/?utm_source=davidwalsh\" style=\"display:block;\">\n    <img decoding=\"async\" src=\"https:\/\/davidwalsh.name\/demo\/rm_perf_block_300.min.svg\" style=\"max-width:100%;height:auto;\" alt=\"Request Metrics real user monitoring\" loading=\"lazy\" width=\"300\" height=\"250\"\/>\n  <\/a>\n<\/div>\n\n  \n\n<\/div>\n<\/div>\n\n\n<div class=\"article-block post-more\" style=\"\u201cclear:both;\u201d\"><ul class=\"post-list small-list\"><li data-url=\"https:\/\/davidwalsh.name\/promises\" itemscope=\"\" itemtype=\"http:\/\/schema.org\/Article\"><span itemscope=\"\" itemtype=\"https:\/\/schema.org\/ImageObject\"><img decoding=\"async\" src=\"https:\/\/davidwalsh.name\/demo\/JavaScriptListImage.png?preview\" class=\"post-image\" alt=\"JavaScript Promise API\"\/><\/span><div class=\"preview\"><h3 itemprop=\"name\"><a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/davidwalsh.name\/promises\" itemprop=\"url\">JavaScript Promise\u00a0API<\/a><\/h3><p>Whereas synchronous code is simpler to comply with and debug, async is usually\u00a0higher for efficiency and suppleness. Why &#8220;maintain up the present&#8221; when you may set off quite a few requests directly after which deal with them when every is prepared? \u00a0Guarantees are\u00a0turning into an enormous a part of the JavaScript world&#8230;<\/p><\/div><\/li><li data-url=\"https:\/\/davidwalsh.name\/send-text-message\" itemscope=\"\" itemtype=\"http:\/\/schema.org\/Article\"><span itemscope=\"\" itemtype=\"https:\/\/schema.org\/ImageObject\"><img decoding=\"async\" src=\"https:\/\/davidwalsh.name\/demo\/sms-text.png?preview\" class=\"post-image\" alt=\"Send Text Messages with PHP\"\/><\/span><div class=\"preview\"><h3 itemprop=\"name\"><a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/davidwalsh.name\/send-text-message\" itemprop=\"url\">Ship Textual content Messages with\u00a0PHP<\/a><\/h3><p>Children lately, I inform ya. \u00a0All they care about is the expertise. \u00a0The video video games. \u00a0The bottled water. \u00a0Oh, and the texting, at all times the texting. \u00a0Again in my day, all we had was&#8230;OK, I had all of this stuff too. \u00a0However I nonetheless do not get&#8230;<\/p><\/div><\/li><\/ul><\/div><div class=\"article-block post-more\"><ul class=\"post-list small-list\"><li data-url=\"https:\/\/davidwalsh.name\/morphing-elements-mootools-css\" itemscope=\"\" itemtype=\"http:\/\/schema.org\/Article\"><span itemscope=\"\" itemtype=\"https:\/\/schema.org\/ImageObject\"><img decoding=\"async\" src=\"https:\/\/davidwalsh.name\/demo\/css3logo250.jpg?preview\" class=\"post-image\" alt=\"Morphing Elements Using MooTools and CSS\"\/><\/span><div class=\"preview\"><h3 itemprop=\"name\"><a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/davidwalsh.name\/morphing-elements-mootools-css\" itemprop=\"url\">Morphing Components Utilizing MooTools and\u00a0CSS<\/a><\/h3><p>Morphing a component between CSS lessons is one other nice trick the MooTools JavaScript library lets you do.  Morphing is not essentially the most sensible use of MooTools, nevertheless it&#8217;s nonetheless a trick at your disposal.&#13;&#13;&#13;&#13;&#13;Step 1:  The XHTML&#13;&#13;The block of content material that may change is&#8230;<\/p><\/div><\/li><li data-url=\"https:\/\/davidwalsh.name\/mootools-pull-quotes\" itemscope=\"\" itemtype=\"http:\/\/schema.org\/Article\"><span itemscope=\"\" itemtype=\"https:\/\/schema.org\/ImageObject\"><img decoding=\"async\" src=\"https:\/\/davidwalsh.name\/demo\/pullquotes.png?preview\" class=\"post-image\" alt=\"Better Pull Quotes with MooTools\"\/><\/span><\/li><\/ul><\/div><\/div>\r\n<br>\r\n","protected":false},"excerpt":{"rendered":"<p>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 dad or mum\/baby\/sibling relationships, very seldomly in worth matching. Think about my shock after I discovered that CSS permits matching attribute values regardless off case! Including a {house}i to [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":1271,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[56],"tags":[1148,690,1147,1146,1149],"class_list":["post-1269","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software","tag-attribute","tag-case","tag-css","tag-insensitive","tag-selector"],"_links":{"self":[{"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=\/wp\/v2\/posts\/1269","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1269"}],"version-history":[{"count":1,"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=\/wp\/v2\/posts\/1269\/revisions"}],"predecessor-version":[{"id":1270,"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=\/wp\/v2\/posts\/1269\/revisions\/1270"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=\/wp\/v2\/media\/1271"}],"wp:attachment":[{"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1269"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1269"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1269"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<!-- This website is optimized by Airlift. Learn more: https://airlift.net. Template:. Learn more: https://airlift.net. Template: 69d9690a190636c2e0989534. Config Timestamp: 2026-04-10 21:18:02 UTC, Cached Timestamp: 2026-05-14 18:05:43 UTC -->