CSS Property Selector

HTML Element Styles With Specific Attributes

The style of HTML elements with specific attributes is more than just class and id.

Note: IE7 and IE8 need to declare !DOCTYPE to support the attribute selector! IE6 and lower versions do not support attribute selectors.

Attribute Selector

The following example turns all the elements containing the title (title) into blue:

Example

[title]
{
     color:blue;
}

 Try It! 

Property and Value Selector

The following example changes the border style of the title='tutorialfish' element:

Example

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

 Try It! 

Attribute and Value Selector - Multi-Value

The following is an example of an element style that contains a title attribute with a specified value, using (~) to separate the attribute and the value:

Example

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

 Try it! 

The following is an example of an element style that contains the lang attribute of the specified value, using (|) to separate the attribute and the value:

Example

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

 Try It! 

Form Style

The attribute selector style does not need to use the form of class or id:

Example

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

 Try It!