CSS Tutorial Example
Example
CSS Reference
CSS Introduction
CSS Introduction
CSS Internal
CSS Selector
CSS External
CSS Inline
CSS Class
CSS Background
CSS Font
CSS Text
CSS Padding
CSS Margin
CSS Border
CSS List
CSS Pseudo Class and Mouseover
Advanced Topics
CSS Cursor
CSS Properties
CSS Position
CSS Layers
CSS Float
CSS ID vs Class
CSS Display
CSS Align
CSS Navigation Bar
CSS Attribute Selectors
CSS Image Gallery
CSS Image Opacity
CSS Attribute Selectors
Style HTML Elements With Specific Attributes
It is possible to style HTML elements that have specific attributes, not just class and id.
Note: Internet Explorer 7 (and higher) supports attribute selectors only if a !DOCTYPE is specified. Attribute selection is NOT supported in IE6 and lower.
Attribute Selector
he example below styles all elements with a title attribute:
[title]
{
color:blue;
}
Attribute and Value Selector
The example below styles all elements with title="Hiscript":
[title=Hiscript]
{
border:5px solid green;
}
Attribute and Value Selector Multiple Values
The example below styles all elements with a title attribute that contains a specified value. This works even if the attribute has space separated values:
[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:
Styling Forms
The attribute selectors are particularly useful for styling forms without class or ID:
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
}