HTML Dog
Skip to navigation

Pseudo Classes

Pseudo classes are bolted on to selectors to specify a state or relation to the selector. They take the form of selector:pseudo_class { property: value; }, simply with a colon in between the selector and the pseudo class.

Links

link, targeting unvisited links, and visited, targeting, you guessed it, visited links, are the most basic pseudo classes.

The following will apply colors to all links in a page depending on whether the user has visited that page before or not:


a:link {
    color: blue;
}

a:visited {
    color: purple;
}

Dynamic Pseudo Classes

Also commonly used for links, the dynamic pseudo classes can be used to apply styles when something happens to something.

Changing the styles of a box when the cursor moves over it.

a:active {
    color: red;
}

a:hover {
    text-decoration: none;
    color: blue;
    background-color: yellow;
}

input:focus, textarea:focus {
    background: #eee;
}

First Children

Finally (for this article, at least), there is the first-child pseudo class. This will target something only if it is the very first descendant of an element. So, in the following HTML…


<body>
    <p>I’m the body’s first paragraph child. I rule. Obey me.</p>
    <p>I resent you.</p>
...

…if you only want to style the first paragraph, you could use the following CSS:


p:first-child {
    font-weight: bold;
    font-size: 40px;
}