Pseudoclasses and Pseudoelements

In this section, we will introduce you to pseudoclasses and pseudoelements in CSS.

These are helpful tools that allow you to apply styles to elements based on their state or position, and to style specific parts of elements.

What Are Pseudoclasses?

Pseudoclasses are keywords added to selectors that specify a special state of the selected elements. They allow you to style elements based on their state, such as when they are hovered over, focused on, or even based on their position among siblings.

Common Pseudoclasses

• :hover: Styles an element when the mouse pointer is over it.
• :active: Styles an element when it is being clicked.
• :focus: Styles an element when it has focus, such as an input field when clicked or tabbed into.
• :nth-child(n): Styles an element based on its position among its siblings.

There are other ones out there but I wanted to focus on some of the ones I most commonly see and use.

They are used by adding them to the end of the selector you want affected.

As an example let's start with :hover:

:hover

The following CSS will target <a> will change color from blue to red when you hover over it with the mouse pointer:

a {
    color: blue;
}

a:hover {
    color: red;
}

If you want to use another selector, you can too.

Here's an example of targeting a class of .hover-element with the same effect:

.hover-element {
    color: orange;
}

.hover-element:hover {
    color: green;
}

Here's the output to play with:

:active

:active will change styles whenever an element is "active". For example, when you click a button it becomes active:

button {
  background-color: lightgray;
}

button:active {
  background-color: red;
}

In this example, the button's background color will change to red when it is clicked.

:focus

This one let's us know when an element is focused and apply styles. This especially useful for users who are using their keyboard to navigate and to let them know what element they have selected.

input {
    border: 1px solid black;
}

input:focus {
    border: 5px solid red;
}

In this example, the input field's border will become thicker and change color to red when it is focused. In the output below try clicking around the element (to focus the window) and pressing the tab key and see the focus being shown. Or you can also just click the element.

:nth-child(n)

This one allows us to pick a child element to style by count or when it is even or odd. So imagine you have a list of items and you want the last item highlighted and then the even and odd numbered items in the list with different styles. Here's how you would do it:

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

li:nth-child(even) {
    background-color: lightgray;
}

li:nth-child(5) {
    background-color: pink;
}

In this example, odd list items will have a light blue background, even list items will have a light gray background, and then finally, a pink background for the 5th element.

Notice we added the :nth-child(5) last so that the cascading would take effect. If we added it sooner it wouldn't work.

What Are Pseudoelements?

Pseudoelements allow you to style specific parts of an element. They are useful for adding cosmetic content to an element that can be styled independently of the element's main content.

Common Pseudoelements

• ::before: Adds content before the content of an element.
• ::after: Adds content after the content of an element.
• ::first-line: Styles the first line of text inside an element.
• ::first-letter: Styles the first letter of text inside an element.

::before

With ::before we can add content "before" the content of the element:

p::before {
  content: "Note: ";
  color: red;
}

In this example, the text "Note: " will be added before the content of the paragraph and will be styled in red:

::after

The opposite of ::before, with ::after we can add content "after" the content of the element:

Create a CSS file named after.css:

p::after {
    content: " End of note.";
    color: blue;
}

In this example, the text " End of note." will be added after the content of the paragraph and will be styled in blue:

::first-line

::first-line can be used to change the font styles of the first line of a paragraph:

p::first-line {
  font-weight: bold;
  color: green;
}

In this example, the first line of the paragraph will be bold and green.

::first-letter

::first-letter can be used to change the font styles of the first letter of a paragraph:

p::first-letter {
    font-size: 200%;
    color: purple;
}

This section added a few more advanced tools to your toolbox. Although you'll find yourself reaching for a lot, I thought an introduction to a few examples will help you remember that you have these tools when you find some scenarios that are not so straightforward to style.

Play around with these new tools and have some fun!