{"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 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

Attribute selection has a special syntax. Here’s an example:<\/p>\n

a[href=\"https:\/\/css-tricks.com\"] {\r\n  color: #E18728;\r\n}<\/code><\/pre>\n
That’s an exact match<\/strong> selector that will only select links with the exact href<\/code> attribute value of “https:\/\/css-tricks.com”. <\/p>\n
The Seven Different Types<\/h3>\n
Attribute selectors are case-sensitive by default (see case-insensitive matching<\/a> below), and are written inside brackets []<\/code>.<\/p>\n
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
[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
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, 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
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, 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
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, 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
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[href$=\"pdf\"]<\/code> selects every link that ends with .pdf.<\/p>\n
\n
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
[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
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 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
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
Combining them<\/h3>\n
You can combine an attribute selector with other selectors, like tag, class, or ID. <\/p>\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
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 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
See the Pen Combined Attributes and Attribute-Only Selection <\/a> by CSS-Tricks (@css-tricks<\/a>) on CodePen<\/a>.<\/p>\n
Attribute Selectors in JavaScript and jQuery<\/h3>\n
Attribute selectors can be used in jQuery just like any other CSS selector. In JavaScript, you can use attribute selectors with document.querySelector()<\/code> and document.querySelectorAll()<\/code>.<\/p>\n
See the Pen Attribute Selectors in JS and jQuery<\/a> by CSS-Tricks (@css-tricks<\/a>) on CodePen<\/a>.<\/p>\n
Related<\/h3>\n