CSS Attribute Selectors

Styling HTML Elements with Specific Attributes

Styling HTML elements with specific attributes is not limited to classes and IDs.

Note: IE7 and IE8 require the !DOCTYPE declaration to support attribute selectors! IE6 and earlier versions do not support attribute selectors.

Attribute Selectors

The following example changes all elements that contain the title attribute to blue:

Example

[title]
{
    color:blue;
}

Attribute and Value Selectors

The following example changes the border style of elements with the title 'tutorialpro':

Example

[title=tutorialpro]
{
    border:5px solid green;
}

Attribute and Value Selectors - Multiple Values

Here is an example of styling elements with the specified value in the title attribute, using (~) to separate the attribute and value:

Example

[title~=hello] { color:blue; }

Here is an example of styling elements with the specified value in the lang attribute, using (|) to separate the attribute and value:

Example

[lang|=en] { color:blue; }

Form Styles

Attribute selectors can style elements without using classes or IDs:

Example

input[type="text"]
{
    width:150px;
    display:block;
    margin-bottom:10px;
    background-color:yellow;
}
input[type="button"]
{
    width:120px;
    margin-left:35px;
    display:block;
}