{"id":109,"date":"2008-04-30T07:00:06","date_gmt":"2008-04-30T12:00:06","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=109"},"modified":"2008-04-30T07:00:06","modified_gmt":"2008-04-30T12:00:06","slug":"css-attribute-selectors","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/css-attribute-selectors\/","title":{"rendered":"CSS Attribute Selectors: Built-In Classes"},"content":{"rendered":"

\"\"<\/p>\n

If you\u2019ve been a CSS groupie or follower of this website for any length of time, you should have a fairly firm grasp on the concept of using classes in XHTML as \u201chooks\u201d into your pages (and if not, this article is a good place to catch up<\/a>). But classes and IDs aren\u2019t the only ways you can describe the elements in your website in order to style them. You can also make use of attribute selectors.<\/p>\n

Attributes are the property=\u201dvalue\u201d pairs inside of most XHTML elements that further describe that element. Take the anchor tag, for example:<\/p>\n

<a href="page.html" title="Click to visit!">Text<\/a><\/pre>\n
This anchor tag has two attributes: href and title. Those attributes also have very specific values associated with them. And it\u2019s these attributes, and their values, that make attribute selectors work.<\/p>\n
By using attribute selectors in your CSS, you\u2019re able to target elements with specific attributes, or even specific values within those attributes. When using attribute selectors, the attribute is contained within [brackets], just like how .classes have a leading period, or #ids have a leading pound sign. There are four ways to use attribute selectors:<\/p>\n
The [attribute]<\/strong> syntax is the least specific of the four. It allows you to target any element with a specific attribute set, regardless of its value. For example:<\/p>\n
a[title] {\n\tfont-weight: bold;\n\tcursor: help;\n}<\/pre>\n
This little bit of CSS would target any anchor tag that had a title attribute set, regardless of what the title contained. My CSS here makes the anchor boldfaced, and changes the cursor to a question mark when the user hovers over the link. This could be useful to indicate to the user that more information (i.e., the tool tip) is coming.<\/p>\n
The most specific syntax is [attribute=\u201dvalue\u201d]<\/strong>. Using this selector, you\u2019d be able to apply specific styles to elements with specific values set. So if, for example, you had an anchor that pointed to a specific website you wanted to emphasize:<\/p>\n
a[href=\"http:\/\/cssnewbie.com\/\"] {\n\tfont-size: 120%;\n\tcolor: red; \n}<\/pre>\n
This code would add a bit of emphasis to any link going to the front page of CSSnewbie. I would recommend copying and pasting this code into any website you happen to be working on at the moment. :)<\/p>\n
The [attribute~=\u201dvalue\u201d]<\/strong> syntax allows you to look within the attribute\u2019s values and find a specific value within a space-separated list of values. Alternatively, you can use the related [attribute|=\u201dvalue\u201d]<\/strong> syntax to find parts of a value that are separated by hyphens (instead of spaces). So, for example, if I had an image with an alt tag that read \u201cGallery: Wombats Gone Wild,\u201d I could style this gallery (and all other galleries that followed this same pattern) like so:<\/p>\n
img[alt~=\"Gallery:\"] {\n\tborder: 2px solid #333;\n}<\/pre>\n
And suddenly, all of your images that link to galleries have special styling, without having to add any additional classes! And that\u2019s really the beauty of attribute selectors: if used properly, they can be a great help in the fight against Classitis<\/a>. <\/p>\n
Of course, attribute selectors don\u2019t work everywhere (why would they? They\u2019re too cool for school). Here\u2019s where attribute selectors earn a big fat FAIL:<\/p>\n