CSS Attribute selectors are a great way to target specific elements in your page and apply styles to them with out have go back and opening up the template file and changing code.

I find them extremely useful for creating form css.

There are 6 different types of attribute selectors

• [att=value]
  The attribute has to have the exact value specified.
• [att~=value]
  The attribute’s value needs to be a whitespace separated list of words (for example, class=”title featured home”), and one of the words is exactly the specified value.
• [att|=value]
  The attribute’s value is exactly “value” or starts with the word “value” and is immediately followed by “-”, so it would be “value-”.
• [att^=value]
  The attribute’s value starts with the specified value.
• [att$=value]
  The attribute’s value ends with the specified value.
• [att*=value]
  The attribute’s value contains the specified value.

Here is an example page where I have formatted elements with attribute selectors only.

Sample CSS Used

<style type="text/css" media="screen">
p[tile='para1'] {
color:red;
}
input[type="text"] {
width: 200px;
background-color: #DDD;
border:0px;
display:block;
padding:3px;
}
input[type="submit"] {
width: 200px;
background-color: #000;
border:0px;
display:block;
padding:5px;
color:#fff;
margin-top:5px;
}
a[href$='.jpg']{
background:green;
color:#fff;
}
</style>