{"id":14152,"date":"2011-09-06T19:49:17","date_gmt":"2011-09-07T02:49:17","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14152"},"modified":"2019-06-28T11:04:56","modified_gmt":"2019-06-28T18:04:56","slug":"attribute","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/selectors\/a\/attribute\/","title":{"rendered":"[attribute]"},"content":{"rendered":"
There are lots of ways you can select elements in CSS. The most basic selection is by tag name, like Attribute selection has a special syntax. Here’s an example:<\/p>\n That’s an exact match<\/strong> selector that will only select links with the exact Attribute selectors are case-sensitive by default (see case-insensitive matching<\/a> below), and are written inside brackets There are seven different types of matches you can find with an attribute selector, and the syntax is different for each. Each of the more complex attribute selectors build on the syntax of the exact match selector — they all start with the attribute name and end with an equals sign followed by the attribute value(s), usually in quotes. What goes between the attribute name and equals sign is what makes the difference among the selectors.<\/p>\n Value contains:<\/strong> attribute value contains a term as the only value, a value in a list of values, or as part of another value. To use this selector, add an asterisk (*) before the equals sign. For example, Value is in a space-separated list:<\/strong> value is either the only attribute value, or is a whole value in a space-separated set of values. Unlike the “contains” selector, this selector will not look for the value as a word fragment. To use this selector, add a tilde (~) before the equals sign. For example, Value starts with:<\/strong> attribute value starts with the selected term. To use this selector, add a caret (^) before the equals sign. Don’t forget, case-sensitivity matters. For example, img[alt^=”art”] will select images with the alt text “art show” and “artistic pattern”, but not an image with the alt text “Arthur Miller” because “Arthur” begins with a capital letter.<\/p>\n Value is first in a dash-separated list:<\/strong> This selector is very similar to the “starts with” selector. Here, the selector matches a value that is either the only value or is the first<\/em> in a dash-separated list of values. To use this selector, add a pipe character (|) before the equals sign. For example, Value ends with:<\/strong> attribute value ends with the selected term. To use this selector, add a dollar sign ($) before the equals sign. For example, A note about quotes:<\/strong> You can go without quotes around the value in some circumstances, but the rules for selecting without quotes are inconsistent cross-browser. Quotes always work, so if you stick to using them you can be sure your selector will work.<\/p>\n<\/div>\n See the Pen Attribute Selectors<\/a> by CSS-Tricks (@css-tricks<\/a>) on CodePen<\/a>.<\/p>\n Fun fact: the values are treated as strings, so you don’t have to do any fancy escaping of characters to make them match, as you would if you used unusual characters in a class or ID selector.<\/p>\n Case-insensitive attribute selectors are part of the CSS Working Group’s Selectors Level 4<\/a> specification. As mentioned above, attribute value strings are by default case-sensitive, but can be changed to case-insensitive by adding Case-insensitive matching could be really handy for targeting attributes holding unpredictable, human-written text. For example, suppose you were styling a speech bubble on a chat app and wanted to add a “waving hand” to any messages with the text “hello” in some form. You could do so with only CSS, using a case-insensitive matcher to catch all possible variations:<\/p>\n See the Pen Case-insensitive CSS attribute matching<\/a> by CSS-Tricks (@css-tricks<\/a>) on CodePen<\/a>.<\/p>\n You can combine an attribute selector with other selectors, like tag, class, or ID. <\/p>\n Or even combine multiple attribute selectors. This example selects images with alt text that includes the word “person” as the only value or a value in a space separated list, and<\/b> a See the Pen Combined Attributes and Attribute-Only Selection <\/a> by CSS-Tricks (@css-tricks<\/a>) on CodePen<\/a>.<\/p>\n Attribute selectors can be used in jQuery just like any other CSS selector. In JavaScript, you can use attribute selectors with See the Pen Attribute Selectors in JS and jQuery<\/a> by CSS-Tricks (@css-tricks<\/a>) on CodePen<\/a>.<\/p>\n There are lots of ways you can select elements in CSS. The most basic selection is by tag name, like p { }. Almost anything more specific than a tag selector uses attributes — class and ID both select on those attributes on HTML elements. But class and ID aren’t the only attributes developers can […]<\/p>\n","protected":false},"author":1036,"featured_media":0,"parent":14146,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","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":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":148811,"url":"https:\/\/css-tricks.com\/lodge\/learn-jquery\/06-jquery-selector-extensions\/","url_meta":{"origin":14152,"position":0},"title":"#06: jQuery Selector Extensions","date":"September 2, 2013","format":false,"excerpt":"jQuery can select anything that CSS3 can select. But it doesn't stop there! There are a number of additional selectors that jQuery offers (via the Sizzle selector engine) that are pretty darn useful sometimes. For instance, CSS has attribute selectors that allow you to select an element based on any\u2026","rel":"","context":"With 5 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14204,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/i\/id\/","url_meta":{"origin":14152,"position":1},"title":"ID","date":"September 6, 2011","format":false,"excerpt":"The #id selector allows you to target an element by referencing the id HTML attribute. Similar to how class attributes are denoted in CSS with a \u201cperiod\u201d (.) before the class name, ID attributes are prefixed with an \u201coctothorpe\u201d (#), more commonly known as a \u201chash\u201d or \u201cpound sign\u201d. #header\u2026","rel":"","context":"With 2 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":166069,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/r\/read-write-read\/","url_meta":{"origin":14152,"position":2},"title":":read-write \/ :read-only","date":"March 17, 2014","format":false,"excerpt":"The :read-write and :read-only selectors are two mutability pseudo-classes aiming at making form styling easier based on disabled, readonly and contenteditable HTML Attributes. While the browser support is not that bad, the various implementations are quite wonky. According to the official CSS Specifications, a :read-write selector will match an element\u2026","rel":"","context":"In \":read-only\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14267,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/r\/required\/","url_meta":{"origin":14152,"position":3},"title":":required","date":"September 6, 2011","format":false,"excerpt":"The :required pseudo class selector in CSS allows authors to select and style any matched element with the required attribute. Forms can easily indicate which fields must have valid data before the form can be submitted, but allows the user to avoid the wait incurred by having the server be\u2026","rel":"","context":"With 12 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":259404,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/a\/any-link\/","url_meta":{"origin":14152,"position":4},"title":":any-link","date":"August 24, 2017","format":false,"excerpt":"The :any-link pseudo-class in CSS provides a method for selecting elements that are the source anchor of a hyperlink. If the term\u00a0source anchor\u00a0lost you, that\u2019s a fancy name for the\u00a0href\u00a0attribute on the HTML elements\u00a0,\u00a0\u00a0and\u00a0. (Why you would need to target an\u00a0\u00a0or\u00a0\u00a0in CSS is beyond me, but hey.) The\u00a0HTML spec\u00a0has a\u2026","rel":"","context":"In \":any-link\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":148076,"url":"https:\/\/css-tricks.com\/lodge\/learn-jquery\/04-jquery-selectors-css3-selectors\/","url_meta":{"origin":14152,"position":5},"title":"#04: jQuery Selectors are CSS3 Selectors","date":"August 25, 2013","format":false,"excerpt":"In CSS, you can select all elements on the page with this: h1 { \/* style all elements *\/ } In jQuery, you can use that exact same selector. $(\"h1\") \/\/ set of all elements In fact, you can use any CSS selector (even CSS3 selectors) in jQuery. In this\u2026","rel":"","context":"With 5 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14152"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/1036"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=14152"}],"version-history":[{"count":15,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14152\/revisions"}],"predecessor-version":[{"id":292188,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14152\/revisions\/292188"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14146"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14152"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14152"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}p { }<\/code>. Almost anything more specific than a tag selector uses attributes —
class<\/a><\/code> and
ID<\/a><\/code> both select on those attributes on HTML elements. But
class<\/code> and
ID<\/code> aren’t the only attributes developers can select. We can use any<\/em> of an element’s attributes as selectors.<\/p>\n
a[href=\"https:\/\/css-tricks.com\"] {\r\n color: #E18728;\r\n}<\/code><\/pre>\n
href<\/code> attribute value of “https:\/\/css-tricks.com”. <\/p>\n
The Seven Different Types<\/h3>\n
[]<\/code>.<\/p>\n
[data-value] {\r\n \/* Attribute exists *\/\r\n}\r\n\r\n[data-value=\"foo\"] {\r\n \/* Attribute has this exact value *\/\r\n}\r\n\r\n[data-value*=\"foo\"] {\r\n \/* Attribute value contains this value somewhere in it *\/\r\n}\r\n\r\n[data-value~=\"foo\"] {\r\n \/* Attribute has this value in a space-separated list somewhere *\/\r\n}\r\n\r\n[data-value^=\"foo\"] {\r\n \/* Attribute value starts with this *\/\r\n}\r\n\r\n[data-value|=\"foo\"] {\r\n \/* Attribute value starts with this in a dash-separated list *\/\r\n}\r\n\r\n[data-value$=\"foo\"] {\r\n \/* Attribute value ends with this *\/\r\n}<\/code><\/pre>\n
img[alt*=\"art\"]<\/code> will select images with the alt text “abstract art<\/i>” and “athlete starting<\/i> a new sport”, because the value “art” is in the word “starting”. <\/p>\n
img[alt~=\"art\"]<\/code> will select images with the alt text “abstract art<\/i>” and “art<\/i> show”, but not “athlete starting a new sport” (which the “contains” selector would<\/em> select).<\/p>\n
li[data-years|=\"1900\"]<\/code> will select list items with a
data-years<\/code> value of “1900-2000”, but not the list item with a
data-years<\/code> value of “1800-1900”.<\/p>\n
a[href$=\"pdf\"]<\/code> selects every link that ends with .pdf.<\/p>\n
[class=\"(\u256f\u00b0\u25a1\u00b0\uff09\u256f\ufe35 \u253b\u2501\u253b\"]{\r\n color: red;\r\n font-weight: bold;\r\n}<\/code><\/pre>\n
Case-insensitive matching<\/h3>\n
i<\/code> just before the closing bracket:<\/p>\n
[attribute=\"value\" i] {\r\n \/* Styles here will apply to elements with:\r\n attribute=\"value\"\r\n attribute=\"VaLuE\"\r\n attribute=\"VALUE\"\r\n ...etc\r\n *\/\r\n}<\/code><\/pre>\n
Combining them<\/h3>\n
div[attribute=\"value\"] {\r\n \/* style rules here *\/\r\n}\r\n\r\n.module[attribute=\"value\"] {\r\n \/* style rules here *\/\r\n}\r\n\r\n#header[attribute=\"value\"] {\r\n \/* style rules here *\/\r\n}<\/code><\/pre>\n
src<\/code> value that includes the value “lorem”:<\/p>\n
img[alt~=\"person\"][src*=\"lorem\"] {\r\n \/* style rules here *\/\r\n}<\/code><\/pre>\n
Attribute Selectors in JavaScript and jQuery<\/h3>\n
document.querySelector()<\/code> and
document.querySelectorAll()<\/code>.<\/p>\n
Related<\/h3>\n
\n
More Information<\/h3>\n
\n
Browser Support<\/h3>\n
\n\n
\n Chrome<\/span><\/th>\n Safari<\/span><\/th>\n Firefox<\/span><\/th>\n Opera<\/span><\/th>\n IE<\/span><\/th>\n Android<\/span><\/th>\n iOS<\/span><\/th>\n<\/tr>\n<\/thead>\n\n \n Any<\/td>\n Any<\/td>\n Any<\/td>\n Any<\/td>\n 7+<\/td>\n Any<\/td>\n Any<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"