Pseudo-classes target different states of an element: when the pointer hovers over a link, for example. Pseudo-elements allow you to target a specific part of an element, such as the first line of a paragraph.
So, without any further ado, let’s explain the basics of pseudo-classes and pseudo-elements.
What Is a Pseudo-Class?
A pseudo-class is a CSS selector that selects HTML elements in a specific state. Some states refer to context, such as the first element of its type. Others are behavioral, such as when a link is being hovered over by the mouse pointer. They allow you to style content based on a user’s actions. The contextual states, in particular, help you write flexible, maintainable, and clean code. Behavioral states offer a shortcut for functionality you might otherwise have to use JavaScript for.
You can easily recognize pseudo-classes as they start with a colon ( : ). Let’s see a few instances of simple and user-action pseudo-classes.
Simple Pseudo-Class Example
First, let’s write HTML code.
Notice that there are several paragraphs within the same section. To style them individually, you could give a separate class to each one and use a CSS class selector. But this isn’t very practical, particularly if the content may change frequently. Instead, you can use pseudo-classes that don’t exist in the HTML but still allow you to target and style the elements. Let’s see how it works:
CSS
Output:
Using simple pseudo-classes like :first-child, :nth-child(x), and, :last-child we can easily select and style the paragraphs. Note that these pseudo-classes select the paragraphs themselves, not their child elements.
User-Action Pseudo-Class Example
User-action or behavioral pseudo-classes only apply when the user interacts with the document. One of the most popular examples includes :link, :visited, :hover, and :focus states. Let’s see the :hover state example for a link and an image.
HTML
In this example, there are two images and a link. The images are positioned in the same spot, so you can switch them by hiding one and showing the other.
CSS
This first example demonstrates the effect of hovering over the link. The CSS changes its color and border:
In this second example, you can see the effect of hovering over the image. It has its opacity set to 0 which effectively makes the image transparent.
What Is a Pseudo-Element?
A pseudo-element behaves similarly to a pseudo-class. Remember that a pseudo-class applies to an existing element. A pseudo-element, meanwhile, acts as if a new HTML element exists. Also, a pseudo-element starts with a double colon ( :: ). Let’s see how it works with an example.
HTML
Now, we’ll use a ::before pseudo-element to add the text Learn More and an ::after pseudo-element to add the text Buy Now, using only CSS. We’ll also apply the position property to place these pseudo-elements relative to the parent container.
The final effect overlays ‘ribbon’-like labels to the top-left and bottom-right of the image:
Get Your Hands on Pseudo-Classes and Pseudo-Elements
CSS pseudo-classes and pseudo-elements, when used properly, open doors to many possibilities. You may feel overwhelmed at first, but practicing this technique is key to improving your web design skills. The key is to always test your designs thoroughly, making use of features such as Google Chrome’s DevTools.
We hope that you’ve learned the basics of pseudo-classes and pseudo-elements. Remember that learning never stops! So, keep on exploring new CSS selectors and try to implement and test them in your upcoming project.
