CSS pseudo-elements and pseudo-classes

CSS pseudo-elements and pseudo-classes

Sunkanmi Fafowora's photo
Sunkanmi Fafowora
·

3 min read

Writing documentation for CSS-Tricks has allowed me to understand CSS beyond the surface-level tutorials and actually go a little deeper into how its syntax works. Understanding how its core documentation and properties worked gave me a bit of joy as it was fun explaining what I would take days to study in simple terms. Like a eureka moment you know? Sharing that with others makes me happy as you don’t have to go through the same level of studying I had to go through.

Part of what I got to understand better were the pseudo-elements and pseudo-classes. In this article, I will clearly explain the differences between CSS pseudo-elements, and pseudo-classes.

CSS pseudo-elements

The CSS pseudo-elements are used to style specific parts of an HTML element. Pseudo-elements apply to only specific HTML elements. For example, the CSS ::file-selector-button only applies styles to the <input type="file"> in HTML and would fail to work for a paragraph text:

/* Works for this */
input[type="file"]::file-selector-button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
}
/* Does not work */
p::file-selector-button {
    color: red;
}

But, some pseudo-elements like ::before can be used on most HTML elements except replaced elements like <img>, <iframe>, <video>, etc.

All pseudo-elements precede with a double colon before their name identifiers so that’s a super simple way to identify them.

You can find more of them on CSS-Tricks.

CSS pseudo-classes

The CSS pseudo-classes are used to style or add specific features and states to elements. Examples include a hover state, what happens when a text or button is clicked, and having to style a specific HTML element within another HTML element.

Here’s a simple example.

<body>
  <h1>nth-child and hover Example</h1>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>
</body>

/* Styles every second list item */
li:nth-child(2) {
  color: blue;
  font-weight: bold;
}

/* Adds hover feature to all list items */
li:hover {
  background-color: yellow;
  cursor: pointer;
}

Notice how the CSS pseudo-classes always precede with a single column. So keep that in mind next time you’re trying to identify them.

CSS pseudo-classes vs CSS pseudo-elements

Let’s highlight their differences in a table. shall we?

CSS Pseudo-ClassesCSS Pseudo-Elements
Used to style or apply features/states to elements, such as hover, focus, etc.Used to style specific parts of an element, such as the first letter, or first line of an element
A single colon (:) precedes the pseudo-class name. Example: :hover, :nth-child().A double colon (::) precedes the pseudo-element name. Example: ::before, ::file-selector-button.
This can apply to most HTML elements.Limited to specific parts or elements (e.g., ::file-selector-button applies to only the <input type="file">).
Works with replaced elements like <img>, <iframe>, etc.Some pseudo-elements, like ::before and ::after, do not work on replaced elements.

Conclusion

It’s important to understand the differences between how the CSS pseudo-elements and pseudo-selectors work in order to enhance your CSS code and offer more features to what’s already present. This article clearly explains their differences while providing context and examples on them.

I hope you enjoyed reading this! Who knows? Maybe, I might even send a draft on a CSS function on CSS-Tricks soon. :) Thank you for reading thus far and I hope to see you in the next article. 🚀

CSS3CSSFrontend Development