Pseudo Elements and Pseudo Classes

Photo by Ferenc Almasi on Unsplash

Pseudo-classes and pseudo-elements are CSS tools that enhance styled HTML elements. Here is what I’ve learned about pseudo-classes and pseudo-elements through research, and trial and error.

Firstly, pseudo-elements are keywords that when combined with a selector, can style a specific part of that selected element. For example, if I wanted to style the first letter of a <h1> tag, I could pair the h1 selector with a keyword in order to target the first letter. According to CSS3 the correct syntax when using pseudo-elements is:

selector::pseudo-element{
  property:value;
}

However, for the sake of backward compatibility, the original syntax format is still accepted.

selector:pseudo-element{
  property:value;
}

For any examples that I use, I will be following the CSS3 syntax. There are a few pseudo-elements that require double colons for use, so always check documentation before adding to your code. The reason for the syntax change was to better differentiate pseudo-elements from pseudo-classes. We’ll take a look at those next.

A pseudo-class is a selector/keyword pair that styles an element in response to a change in state. Meaning that a user action (i.e. mouse over, mouse click) is required to enable that styling feature. The syntax for pseudo-classes is

selector:pseudo-class{
  property:value;
}

Pseudo-classes can be used with a selector or combined with a CSS class. Either method is recognized but it’s always helpful to be more specific when you can. Again, always consult documentation because there are certain pseudo-classes that have specific uses and/or order of use. An example of this is link styling. If you use the :hover pseudo-class keyword, it has to come after the :link and :visited keywords to be enabled.

For both pseudo-elements and pseudo-classes, there are experimental keywords, meaning their specifications haven’t been finalized. These experimental keyword functions could change in the future so beware when adding to your CSS files.

Below is an example that I created using pseudo-elements and pseudo-classes to style a to-do list. Here is my HTML and how it renders in the browser.

My anchor tag is styled so that before being clicked its color:blue, but after being clicked its coloring will change to orange. I used the ::first-letter keyword to target the first letter of each <li>.

Pseudo-elements and pseudo-classes can add a lot of cool characteristics to your application when used correctly. But with great power, comes great responsibility. Pseudo-elements can be used to generate content in your webpage without having to commit to actually creating the content with an element in your HTML file. Please use this styling feature sparingly and for text that isn’t important. CSS-generated content isn’t always accessible to screen readers and those that it is accessible to will read it and possibly confuse the user. Also, CSS-generated content is not selectable.

Remember to always check the documentation for browser compatibility and specifications. I hope that this post helps!