Home»Classes»Getting Started with CSS»Pseudo-Elements

Pseudo-Elements

Updated onDec 22, 2021byAlan Morel

#css

What are Pseudo-elements?
First Child
Last Child
Nth Child
First of Type
Nth of Type
Last of Type
Before and After
First Letter and Line
Resources

What are Pseudo-elements?

Pseudo-elements are similar to pseudo-classes but instead of classes you can style right away, they are instead elements that you can target. Let's look at examples of these.

First Child

You can target the first child of a tag using the first-child pseudo-class. This will target the first child of the element you're targeting.

HTML
CSS

Example of using first child.

Only the first child will be styled with the background color and the others will be left alone.

Last Child

You can target the last child of a tag using the last-child pseudo-class. This will target the last child of the element you're targeting.

HTML
CSS

Example of using last child.

Only the last child will be styled with the background color and the others will be left alone.

Nth Child

You can target a specific child of a tag using the nth-child pseudo-class. Simply add a number to the end of the pseudo-class. This will target the child at the specified index.

HTML
CSS

Example of using nth child.

The middle child will be styled with the background color and the others will be left alone.

First of Type

You can target the first occurrence of a tag using the first-of-type pseudo-class. This will target the first type of the element you're targeting.

HTML
CSS

Example of using first of type.

Only the first child of the type will be styled with the background color and the others will be left alone.

Nth of Type

You can target a specific occurrence of a tag using the nth-of-type pseudo-class. Simply add a number to the end of the pseudo-class. This will target the element at the specified index.

HTML
CSS

Example of using nth of type.

Last of Type

You can target the last occurrence of a tag using the last-of-type pseudo-class. This will target the last type of the element you're targeting.

HTML
CSS

Example of using last of type.

Before and After

Using the before and after pseudo-elements, you can add content before or after an element. You do this via the content property, which takes a string as a value.

HTML
<!DOCTYPE html>
<html>
    <head>
        <title>Before and After</title>
        <style>
            p:before {
                content: 'Hello ';
            }
            p:after {
                content: ' World!';
            }
        </style>
    </head>
    <body>
        <p>(don't mind me!)</p>
    </body>
</html>

An example of before and after.

First Letter and Line

You can style the first letter and first line of an element with the first-letter and first-line pseudo-elements.

HTML
<!DOCTYPE html>
<html>
    <head>
        <title>First Letter and Line</title>
        <style>
            p:first-letter {
                font-size: 5rem;
            }
            p:first-line {
                color: red
            }
        </style>
    </head>
    <body>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </body>
</html>