BASEWEBMASTER

Brought To You By
Tomlin Ventures Ltd

Using Attribute Selectors

Using Attribute Selectors to style with CSS

Attribute selectors added in CSS 2.1 provides another interesting way to style your web pages. As its name would suggest the attribute selector makes use of element attributes rather than page elements themselves.

The idea is very similar to that of the type selectors. All page elements that contain a given attribute and possible value or values are styled.

The Attribute Selector Syntax

To define an attribute you use the [ ] square brackets and simply reference the attribute literally, for example.

CSS
[title] {font-weight: bold;}

There are actually four different variations to the attribute selector. Each has its own uses but the syntax remains fairly similar. The variations are as follows.

Simple Attribute Selector

CSS
[title] {font-weight: bold;}

This would style all elements within the document that have a title attribute.

Literal Value Attribute Selector

CSS
[title="value"] {font-weight: bold;}

This line would style all elements that contain the title attribute when the value of the title attribute is exactly as shown in the CSS.

This is a literal comparison and therefore must includes any white space and also the character case of the title attribute. The quotation marks are necessary but may be either single or double quotes.

CSS
[title="Back To Homepage"] {font-weight: bold;}

This would style any element where the title attribute value = "Back To Homepage" or 'Back To Homepage' simple as that.

Single Word Value Attribute Selector

CSS
[title~="value"] {font-weight: bold;}

In this case the title attribute value is separated into a list of white space separated items one of which must contain the literal value referenced in the CSS. Again the same character case should be used and either single or double quotes may be used.

CSS
[title~="Homepage"] {font-weight: bold;}

This would style any element where the title attribute value contains "Homepage".

Would style
"Homepage" or "My Homepage" or 'Homepage'

Would not style
"homepage" or "MyHomepage" or "Home page"

Just remember that the attribute value will be separated at white space therefore your CSS references should never contain white space as it will never match anything.

Hyphenated Value Attribute Selector

CSS
[title|="value"] {font-weight: bold;}

Similar to the literal attribute selector this would match any element whose title attribute was exactly equal to value. In addition it will also match where the attribute value equals value followed immediately (no white space) by the - character.

This is a rather specified selector but may be used when selecting language attributes or groups of language attributes which often use the hyphen in their codes.


Browser Support

Attribute selectors have been around for some time now and as a result they are widely supported by all the major browsers, of course Internet Explorer 6 and earlier does not comply.

Remember you can always check the browser support for a selector with the browser support table which list all CSS selectors along with their relevant browser support.

Hit the next article button to continue with the tutorial and learn about pseudo selectors.

Share to Facebook Share to Twitter Digg This Stumble It Share to Reddit Share to Delicious Technorati LinkedIn Google Buzz Blogger More...

blog comments powered by Disqus