CSS Basic
CSS HOMECSS Introduction
CSS Syntax
CSS Id & Class
CSS How To
CSS Styling
Styling BackgroundsStyling Text
Styling Fonts
Styling Links
Styling Lists
Styling Tables
CSS Box Model
CSS Box ModelCSS Border
CSS Outline
CSS Margin
CSS Padding
CSS Advanced
CSS Grouping/NestingCSS Dimension
CSS Display
CSS Positioning
CSS Floating
CSS Align
CSS Pseudo-class
CSS Pseudo-element
CSS Navigation Bar
CSS Image Gallery
CSS Image Opacity
CSS Image Sprites
CSS Media Types
CSS Attribute Selectors
CSS Don't
CSS Summary
CSS Examples
CSS ExamplesCSS Quiz
CSS QuizCSS Certificate
CSS References
CSS ReferenceCSS Reference A to Z
CSS Reference Aural
CSS Web Safe Fonts
CSS Units
CSS Colors
CSS Colorvalues
CSS Colornames
CSS Attribute Selectors
| « Previous | Next Chapter » |
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
The example below styles all elements with a title attribute:
Example
Try it yourself » |
Attribute and Value Selector
The example below styles all elements with title="gaohf.com ":
Example
Try it yourself » |
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:
Example
Try it yourself » |
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
Try it yourself » |
Styling Forms
The attribute selectors are particularly useful for styling forms without class or ID:
Example
Try it yourself » |
| « Previous | Next Chapter » |