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; }
Property and Value Selector
The following example changes the border style of the title='tutorialfish' element:
Example
[title=tutorialfish] { border:5px solid green; }
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; }
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; }
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; }