CSS Pseudo-classes

From http://www.w3schools.com (Copyright Refsnes Data)

# CSS Pseudo-classes

CSS pseudo-classes are used to add special effects to some selectors.

## Examples

Hyperlink
This example demonstrates how to add different colors to a hyperlink in a document.

Hyperlink 2
This example demonstrates how to add other styles to hyperlinks.

Hyperlink: use of :focus (does not work in IE)
This example demonstrates how to use the :focus pseudo-class on a hyperlink.

:first-child - change first child <p>
This example sets any <p> element that is the first child of any element to blue.

:first-child - change first child <i> in all <p> elements
This example sets the first <i> element in all <p> elements to blue.

:first-child - change all <i> elements in first child <p>
This example sets any <i> elements in first child <p> elements to blue.

:lang (does not work in IE)
This example demonstrates the use of the :lang pseudo-class.

## 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

A link that is active, visited, unvisited, or when you mouse over a link can all be displayed in different ways in a CSS-supporting browser:

    a:link {color: #FF0000}     /* unvisited link */
    a:visited {color: #00FF00}  /* visited link */
    a:hover {color: #FF00FF}   /* mouse over link */
    a:active {color: #0000FF}   /* selected link */

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.

## CSS2 - 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:

    <html>
    <head>
    <style type="text/css">
    p:first-child
    {
    color:blue
    }
    </style>
    </head>

    <body>
    <p>I am a strong man.</p>
    <p>I am a strong man.</p>
    </body>
    </html>

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:

    <html>
    <head>
    <style type="text/css">
    p > i:first-child
    {
    font-weight:bold
    }
    </style>
    </head>

    <body>
    <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
    <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
    </body>
    </html>

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:

    <html>
    <head>
    <style type="text/css">
    p:first-child i
    {
    color:blue
    }
    </style>
    </head>

    <body>
    <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
    <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
    </body>
    </html>

Try it yourself!

## CSS2 - The :lang Pseudo-class

The :lang pseudo-class allows you to define special rules for different languages. In the example below, the :lang class defines the type of quotation marks for q elements with a lang attribute with a value of "no":

    <html>
    <head>
    <style type="text/css">
    q:lang(no)
    {
    quotes: "~" "~"
    }
    </style>
    </head>

    <body>
    <p>Some text <q lang="no">A quote in a paragraph</q>
    Some text.</p>
    </body>

    </html>

## Pseudo-classes

Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.

W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).

Pseudo-class | Purpose | IE | F | N | W3C
--- | --- | --- | --- | --- | ---
:active | Adds special style to an activated element | 4 | 1 | 8 | 1
:focus | Adds special style to an element while the element has focus | - | 1.5 | 8 | 2
:hover | Adds special style to an element when you mouse over it | 4 | 1 | 7 | 1
:link | Adds special style to an unvisited link | 3 | 1 | 4 | 1
:visited | Adds special style to a visited link | 3 | 1 | 4 | 1
:first-child | Adds special style to an element that is the first child of some other element | 7 | 1 | 7 | 2
:lang | Allows the author to specify a language to use in a specified element | - | 1 | 8 | 2

From http://www.w3schools.com (Copyright Refsnes Data)