CSS Pseudo-classes

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;
}

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!
a:active MUST come after a:hover in the CSS definition in order to be effective!!
Pseudo-class names are not case-sensitive.

Pseudo-classes and CSS Classes

Pseudo-classes can be combined with CSS classes:

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 IE8 and earlier, a <!DOCTYPE> must be declared.

CSS - The :lang Pseudo-class

The :lang pseudo-class allows you to define special rules for different languages.

Note: IE8 supports the :lang pseudo-class only if a <!DOCTYPE> is specified.

css anchor/link pseudo-classes

You may not know it, but a link has four different states that it can be in. CSS allows you to customize each state. Please refer to the following keywords that each correspond to one specific state:

link - this is a link that has not been used, nor is a mouse pointer hovering over it
visited - this is a link that has been used before, but has no mouse on it
hover - this is a link currently has a mouse pointer hovering over it/on it
active - this is a link that is in the process of being clicked

Using CSS you can make a different look for each one of these states, but at the end of this lesson we will suggest a good practice for CSS Links.

Biblography

Introduction

Syntax and selector

Background

Text style

List

Box model

Floating

Combinators

Pseudo classes

Pseudo element

home contact