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 Pseudo-classes
| « Previous | Next Chapter » |
CSS pseudo-classes are used to add special effects to some selectors.
Syntax
The syntax of pseudo-classes:
| selector:pseudo-class {property:value;} |
CSS classes can also be used with pseudo-classes:
| selector.class:pseudo-class {property:value;} |
Anchor Pseudo-classes
Links can be displayed in different ways in a CSS-supporting browser:
Example
Try it yourself » |
Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!
Note: a:active MUST come after a:hover in the CSS definition in order to be effective!!
Note: Pseudo-class names are not case-sensitive.
Pseudo-classes and CSS Classes
Pseudo-classes can be combined with CSS classes:
| a.red:visited {color:#FF0000;} <a class="red" href="css_syntax.asp">CSS Syntax</a> |
If the link in the example above has been visited, it will be displayed in red.
CSS - The :first-child Pseudo-class
The :first-child pseudo-class matches a specified element that is the first child of another element.
Note: For :first-child to work in IE a <!DOCTYPE> must be declared.
Match the first <p> element
In the following example, the selector matches any <p> element that is the first child of any element:
Example
Try it yourself » |
Match the first <i> element in all <p> elements
In the following example, the selector matches the first <i> element in all <p> elements:
Example
Try it yourself » |
Match all <i> elements in all first child <p> elements
In the following example, the selector matches all <i> elements in <p> elements that are the first child of another element:
Example
Try it yourself » |
CSS - The :lang Pseudo-class
The :lang pseudo-class allows you to define special rules for different languages.
Note: Internet Explorer 8 (and higher) supports the :lang pseudo-class if a <!DOCTYPE>is specified.
In the example below, the :lang class defines the quotation marks for q elements with lang="no":
Example
Try it yourself » |
 |
More Examples |
Add different styles to hyperlinks
This example demonstrates how to add other styles to hyperlinks.
Use of :focus
This example demonstrates how to use the :focus pseudo-class.
Pseudo-classes
The "CSS" column indicates in which CSS version the property is defined (CSS1 or CSS2).
| Pseudo name | Description | CSS |
|---|---|---|
| :active | Adds a style to an element that is activated | 1 |
| :first-child | Adds a style to an element that is the first child of another element | 2 |
| :focus | Adds a style to an element that has keyboard input focus | 2 |
| :hover | Adds a style to an element when you mouse over it | 1 |
| :lang | Adds a style to an element with a specific lang attribute | 2 |
| :link | Adds a style to an unvisited link | 1 |
| :visited | Adds a style to a visited link | 1 |
| « Previous | Next Chapter » |