CSS Attribute Selectors

There are patterns in CSS which can be used in order to determine the rules that would apply to documents and certain parts of a document. These patterns are known as selectors and it is very important to learn about them when it comes to CSS.

A few years ago, the use of CSS attribute selectors was not so common. That was caused by the fact that Internet Explorer 6 did not support it at all. Through the years however the dominance of IE has been eroded and newer browsers have been introduced. Now CSS attribute selectors is becoming more common.

The CSS Attribute Selectors

Attribute selectors are identified by the use of brackets. In its simplest form that you would encounter, an attribute selector is just an attribute name which has brackets on both sides. Here is an example:

[href] {

⋮ declarations

}

 

This could be used for any type of element that uses a href attribute. Attribute selectors could also be used for singling out values.

Case Sensitivity

The values that you would find on an attribute selector are case sensitive, if the language of the markup is also case sensitive. XHTML is case sensitive. It is important that you should keep this in mind or you might get confused.

The Default Attributes

Attribute selectors can only be used when it matches the values and the attributes that can be found on the document tree.

Defining Attribute Selector

There are four major ways that you would be able to define an attribute selector.

[attribute] – This is used if an element has a certain attribute. Here is a sample code using this method to identify an attribute selector:

a[title] {

color : blue ;

}

 

[attribute=value] – This is used if the attribute has a certain value to it. Here is a sample code for that:

a[href=http://webdesign.about.com/] {

font-weight : bold ;

}

 

[attribute~=value] – This is used if the element has attributes with items that are separated by spaces which will be compatible with the value. Here is a sample code for this:

a[rel~=”help”] { color : #00f; } – In this sample all of the elements a with help in it would be given a blue color.

[att|=val] – This is used for an element which uses attributes that are separated by hyphen. Here is a sample code that you can use: </p>

a[lang|=”en”] {color : #00f; } – In this code all elements that uses lang attribute would get the designated color.

These are just some of the things that you should learn about CSS Attribute Selectors. Knowing more about this feature of CSS would allow you to use it a lot more efficiently and make the making of a document faster and more efficient, especially when you are working on several pages that are very common with each other. It is one of the reasons why it is such a powerful tool on the Web today. Learning more about it would save you a great deal of time and trouble.