Pseudo-classes and Pseudo-elements

What is a pseudo-class?

A pseudo-class is a selector that selects elements that are in a specific state, e.g. they are the first element of their type, or they are being hovered over by the mouse pointer. They tend to act as if you had applied a class to some part of your document, often helping you cut down on excess classes in your markup, and giving you more flexible, maintainable code.

Simple pseudo-class example

Let's look at a simple example. If we wanted to make the first paragraph in an article larger and bold, we could add a class to that paragraph and then add CSS to that class. However, this could be annoying to maintain — what if a new paragraph got added to the top of the document? We'd need to move the class over to the new paragraph. Instead of adding the class, we could use the :first-child pseudo-class selector — this will always target the first child element in the article.

article p:first-child {
    font-size: 120%;
    font-weight: bold;
}   

<article>
    <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillomelon azuki bean garlic.</p>
    <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
</article>

All pseudo-classes behave in this same kind of way. They target some bit of your document that is in a certain state, behaving as if you had added a class into your HTML.

User-action pseudo classes

Some pseudo-classes only apply when the user interacts with the document in some way. These user-action pseudo-classes, sometimes referred to as dynamic pseudo-classes, act as if a class had been added to the element when the user interacts with it. Examples include:

• :hover — only applies if the user moves their pointer over an element, typically a link.
• :focus — only applies if the user focuses the element using keyboard controls.

a:link,
a:visited {
    color: rebeccapurple;
    font-weight: bold;
}
a:hover {
    color:hotpink;
}   

<p><a href="">Hover over me</a></p>

What is a pseudo-element?

Pseudo-elements behave in a similar way, however they act as if you had added a whole new HTML element into the markup, rather than applying a class to existing elements.

For example, if you wanted to select the first line of a paragraph you could wrap it in a <span> element and use an element selector; however, that would fail if the number of words you had wrapped were longer or shorter than the parent element's width. As we tend not to know how many words will fit on a line — as that will change if the screen width or font-size changes — it is impossible to robustly do this by adding HTML.

The ::first-line pseudo-element selector will do this for you reliably — if the number of words increases and decreases it will still only select the first line.

Combining pseudo-classes and pseudo-elements

If you wanted to make the first line of the first paragraph bold you could chain the :first-child and ::first-line selectors together.

article p:first-child::first-line { 
  font-size: 120%; 
  font-weight: bold; 
}

Generating content with ::before and ::after

There are a couple of special pseudo-elements, which are used along with the content property to insert content into your document using CSS.

.box::before {
    content: "This should show before the other content."
}  

<p class="box">Content in the box in my HTML page.</p>

A more valid use of these pseudo-elements is to insert an icon, for example the little arrow added in the example below, which is a visual indicator that we wouldn't want read out by a screenreader:

.box::after {
    content: " ➥"
}   

<p class="box">Content in the box in my HTML page.</p>

Pseudo-elements

Pseudo-classes