{"id":15610,"date":"2011-12-18T18:40:00","date_gmt":"2011-12-19T01:40:00","guid":{"rendered":"http:\/\/css-tricks.com\/?p=15610"},"modified":"2011-12-18T21:13:01","modified_gmt":"2011-12-19T04:13:01","slug":"multiple-attribute-values","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/multiple-attribute-values\/","title":{"rendered":"Multiple Attribute Values"},"content":{"rendered":"

Elements can have multiple class names. For instance:<\/p>\n

<div class=\"module accordion expand\"><\/div><\/code><\/pre>\n
Then in CSS, you could match that element based on any one of them:<\/p>\n
\/* All these match that *\/\r\n.module { }\r\n.accordion { }\r\n.expand { }<\/code><\/pre>\n
You can limit your selectors to match only if several of them are present, for example:<\/p>\n
\/\/ Will only match if element has both\r\n.accordion.expand { }<\/code><\/pre>\n
But what about other attributes?<\/h3>\n
Class names are unique in the ability outlined above. Other attributes are not treated as “multiple values” just because they have a space in them. For instance:<\/p>\n
<div data-type=\"module accordion expand\"><\/div><\/code><\/pre>\n
This element just has a data-type attribute with a value of “module accordion expand”, not three unique values “module”, “accordion” and “expand”. But let’s say we wanted<\/em> to be able to select elements based on individual values like we can with class names. <\/p>\n
We could do it by using a “*” substring matching attribute selector<\/a> which will match if the provided string appears anywhere in the value:<\/p>\n
[data-type*=\"module\"] {\r\n\r\n}<\/code><\/pre>\n
or only match when multiple of specific “values” are present:<\/p>\n
[data-type*=\"accordion\"][data-type*=\"expand\"] {\r\n\r\n}<\/code><\/pre>\n
Ever better, use the whitespace separated selector (e.g. [data-type~=\"expand\"]<\/code>). That way you won’t get burned by something like “expand” matching “expander” when you didn’t want to.<\/p>\n
[data-type~=\"accordion\"][data-type~=\"expand\"] {\r\n\r\n}<\/code><\/pre>\n
View Demo<\/a><\/p>\n
Works in IE7+ (because IE 7 was first IE to support attribute selectors)<\/p>\n","protected":false},"excerpt":{"rendered":"
By space separating the value of the class attribute we get “multiple classes” we can select by. But what if we want to be able to do that with other attributes?<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":254046,"url":"https:\/\/css-tricks.com\/managing-state-css-reusable-javascript-functions\/","url_meta":{"origin":15610,"position":0},"title":"Managing State in CSS with Reusable JavaScript Functions","date":"April 28, 2017","format":false,"excerpt":"Determining the most efficient way of managing state can be a challenging issue in CSS, but thankfully there are many OOCSS-based methodologies out there which provide some good solutions. This article is all about managing the attributes that help with state through JavaScript in efficient ways.","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":324719,"url":"https:\/\/css-tricks.com\/how-to-animate-the-details-element-using-waapi\/","url_meta":{"origin":15610,"position":1},"title":"How to Animate the Details Element Using WAAPI","date":"November 5, 2020","format":false,"excerpt":"Animating accordions in JavaScript has been one of the most asked animations on websites. Fun fact: jQuery's slideDown() function was already available in the first version in 2006. In this article, we will see how you can animate the native 
 element using the Web Animations API. CodePen Embed Fallback\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/waapidetails-accordion.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":302917,"url":"https:\/\/css-tricks.com\/a-complete-guide-to-data-attributes\/","url_meta":{"origin":15610,"position":2},"title":"A Complete Guide to Data Attributes","date":"February 17, 2020","format":false,"excerpt":"Everything you ever wanted to know about data attributes in HTML, CSS, and JavaScript.","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/02\/data-attribute-guide.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":5591,"url":"https:\/\/css-tricks.com\/attribute-selectors\/","url_meta":{"origin":15610,"position":3},"title":"The Skinny on CSS Attribute\u00a0Selectors","date":"February 13, 2010","format":false,"excerpt":"CSS has the ability to target HTML elements based on any one of their attributes. You probably already know about classes and IDs. Check out this bit of HTML: 
David Walsh<\/h2> This single element has three attributes: ID, class, and rel. To select the element in CSS,\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":176856,"url":"https:\/\/css-tricks.com\/how-css-selectors-work\/","url_meta":{"origin":15610,"position":4},"title":"Beginner Concepts: How CSS Selectors Work","date":"August 9, 2014","format":false,"excerpt":"Are you new to CSS? This article is for you! Perhaps the biggest key to understanding CSS is understanding selectors. Selectors are what allows you to target specific HTML elements and apply style to them. Let's not think about style right now though, let's just focus on the selecting. In\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2014\/08\/HTMLCSS.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":363745,"url":"https:\/\/css-tricks.com\/write-html-the-html-way-not-the-xhtml-way\/","url_meta":{"origin":15610,"position":5},"title":"Write HTML, the HTML Way (Not the XHTML Way)","date":"March 21, 2022","format":false,"excerpt":"You may not use XHTML (anymore), but when you write HTML, you may be more influenced by XHTML than you think. You are very likely writing HTML, the XHTML way. What is the XHTML way of writing HTML, and what is the HTML way of writing HTML? Let\u2019s have a\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/xhtml.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/15610"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=15610"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/15610\/revisions"}],"predecessor-version":[{"id":15620,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/15610\/revisions\/15620"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=15610"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=15610"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=15610"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}