CSS Attribute Selectors & Style HTML Elements with specific Attributes
It is possible to style HTML element that have specific attributes, not just class and id.
Note
IE7 and IE8 support attribute selectors only if a !DOCTYPE is specified. Attribute selection is NOT supported in IE6 and lower.
Attribute Selector
The example below styles all element with a little attribute.
Example
[title]
{
color:blue;
}
Attribute and Value Selector
The example below styles all elements with title=”W3Schools”.
Example
[title=W3School]
{
border:5px solid green;
}
Attribute and Value Selector-Multiple Values
The example below style all elements with a title attribute that contains a specified value. This works even if the attribute has space separated values:
Example
[title~=hello]{color:blue;}
The example below styles all elements with a lang attribute that contains a specified value. This works even if the attribute has hyphen(_) separated values:
Example
[lang|=en]{color:blue;}
Styling Forms
The attribute selectors are particularly useful for styling forms without class or ID.
Example
input[type=”text”]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:Yellow;
intpu[type=”button”]
width:120px;
margin-left:35px;
display:block;