Pseudo Classes

A CSS pseudo-class is a keyword added to selectors that specifies a special state of the element. For example :hover will apply a style when the user hovers over the element specified by the selector.

Pseudo-classes, together with pseudo-elements, let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator (:visited, for example), the status of its content (like :checked on some form elements), or the position of the mouse (like :hover which lets you know if the mouse is over an element or not).

Link Pseudo Classes

Pseudo link classes alow us to manipulate the way that links look like in their various states. There are four main link pseudo classes.

:link: a:link describes how unvisited links should look.
:visited: a:visited describes how visited links should look.
:hover: a:hover describes how links should look when the mouse is hovering over them.
:active: a:active describes how active links should look.

Note that some of the link states are mutually exclusive (e.g. a given link cannot be simultaneously visited and unvisited) and others are not (while a link is active, it will also be either visited or unvisited). Where mutual exclusion does not occur, the selector which occurs further from the top of the style sheet prevails. To ensure that they work as planned, link classes should always be declared in the order shown above.

Write code to change a webpage's active hyperlinks to red and visited hyperlinks to green, as shown here.

The use of pseudo classes is not restricted to hyperlinks. Pseudo classes can be used on any element.

Write code to change the cursor to a crosshair when it hovers over an image, as shown here.

Write code to allow the user to see change the cursor to a bullseye image when the mouse hovers over an image, as shown here.

:target

There is one other pseudo class that relates to links. This is the :target pseudo class. It does not describe how to display a link. Instead it describes how the link when the hash in the URL and the id of an element are the same. This is used to highlight the currently active anchor within a webpage.

The example below will highlight the currently selected <div> element (Run Example Code).

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo class :target Example</title>
    <style>
        :target
        {
            background-color:#CCC;
            border: thin solid black;
        }

    </style>
</head>

<body>
    <a href = '#dkit'>Dkit</a><br>
    <a href = '#dcu'>DCU</a><br>
    <a href = '#maynooth'>Maynooth</a><br>

    <div id='dkit'>
        <h1>Dundalk Institute of Technology</h1>
        <p>Some text about DkIT.</p>
    </div>

    <div id='dcu'>
        <h1>Dublin City University</h1>
        <p>Some text about DCU.</p>
    </div>

    <div id='maynooth'>
        <h1>Maynooth University</h1>
        <p>Some text about Maynooth University.</p>
    </div>
</body>
</html>

Modify the code above, so that the <h1> of the selected <div> has a black background with white text, as shown here.

Child Pseudo Classes

Position pseudo classes are dependent on the position of elements. We can treat the first, last, odd, even, or any other position of a particular element differently to other elements. For example, we could get the odd rows of a table to have a different background colour to the even rows.

:first-child: first
:last-child: last
:nth-child(n): The input value, n, can be a number or the words 'odd' and 'even'.
:nth-last-child(n): This is similar to nth-child(n).
:only-child: :only-child describes how an only child of its parent should look.

The example below uses the :nth-child(odd) and :nth-child(even) to colour the rows of a list (Run Example):

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo class :nth-child Example</title>
    <style>
        ul
        {
            list-style-type:none;
            margin:0px;
            padding:0px;
        }

        li:nth-child(odd)
        {
            background-color:#FFC;
        }

        li:nth-child(even)
        {
            background-color:#CFF;
        }
    </style>
</head>

<body>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
    </ul>
</body>
</html>

Improve the code above, so that the currently highlighted row is displayed in a different colour, as shown here.

Type Pseudo Classes

:first-of-type: describes how the first element of some parent element should look. The difference between :first-child and :first-of-type is that :first-of-type will match the first element of its element type, even if that element is not the first child of the parent.
:last-of-type: describes how the last element of some parent element should look.
:nth-of-type(n): describes how the nth element of some parent element should look.
:nth-last-of-type(n): describes how the nth element of some parent element should look.
:only-of-type: describes how an 'only' element should look.

Adjust the code from the previous example, so as to include a border with rounded corners, as shown here.

Miscellaneous Pseudo Classes

:root

describes how the root element should look. In HTML, the root is always the HTML element. This is rearly used, as we can apply a style to the document's <body> instead.
For example, the code below will set the webpage background colour to be red.

:root
{
   background-colour:red;
}

:not(selector)

describes how an element that does not match 'selector' should look. Selector can be an element or a class.

:lang(language)

describes how an element that is marked as a given language should look.