pseudo-classes vs pseudo-elements

Written byPhuoc Nguyen

Created

31 Aug, 2023

#Pseudo-classes

Pseudo-classes are a way to select and style an element based on its position or state in the document tree. They're written with a colon followed by the name of the pseudo-class. Some examples of pseudo-classes you might use are:

`:hover` - styles an element when you hover the mouse over it
`:active` - styles an element when you click on it
`:first-child` - styles the first child element of a parent element

Pseudo-classes let you apply styles to elements that already exist based on their position or state. They don't create new elements.

#Pseudo-elements

Pseudo-elements, on the other hand, are used to create new elements that are not in the HTML document tree. They are denoted by two colons followed by the name of the pseudo-element. Some common examples of pseudo-elements include:

`::before` - adds a new element before the content of an element
`::after` - adds a new element after the content of an element
`::first-line` - selects the first line of text within an element

Pseudo-elements are like magic tools that let you create new elements you can style separately from the original element. They're great for adding decorative touches or extra content to an element.

But wait, there's more! There are some super special pseudo-elements that won't even show up in the DOM tree. Here are a few of them:

`::selection` - style the text that is selected by the user
`::placeholder` - style the placeholder text in an input field

#Examples

Check out these examples of how you can use pseudo-classes and pseudo-elements:

css

/* Underline a link when the mouse cursor is over it */
a:hover {
    text-decoration: underline;
}

/* Remove the bottom border from the last item in a list */
li:last-child {
    border-bottom: none;
}

/* Adding a bullet point before a list item */
li::before {
    content: "•";
}

/* Styling the first character of a paragraph */
p::first-letter {
    font-weight: bold;
}

In short, pseudo-classes and pseudo-elements are both used to style different parts of an HTML element, but they have different purposes. Pseudo-classes are used to style existing elements based on their state or position, while pseudo-elements are used to create new elements that can be styled independently.

If you found this post helpful, please consider giving the repository a star on GitHub or sharing the post on your favorite social networks 😍. Your support would mean a lot to me!

Questions? 🙋

Do you have any questions about front-end development? If so, feel free to create a new issue on GitHub using the button below. I'm happy to help with any topic you'd like to learn more about, even beyond what's covered in this post.

While I have a long list of upcoming topics, I'm always eager to prioritize your questions and ideas for future content. Let's learn and grow together! Sharing knowledge is the best way to elevate ourselves 🥷.

Ask me questions

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.

By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.

Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.

Phước Nguyễn