Pseudo-classes and Pseudo-elements in CSS

Pseudo-classes are something you’ve probably used, even if you didn’t know it. One of the most popular pseudo-classes are ‘:hover’. If you look up pseudo in the dictionary you come across a dictionary you get definitions likes “pretending, false, or a sham.” A pseudo-class is a “fake” class in CSS.

  • Pseudo-classes are classify elements without using the elements name, attributes or content
  • Some pseudo-classes are dynamic, such as ‘:hover’ or ‘:visited’

Pseudo-elements are different because a pseudo-element is used to create a new virtual element. Using pseudo-elements make it possible for you to access the first character or the first line of an elements content. Using pseudo-elements allows you to custom style certain parts of an existing element.

Let’s say you have a simple HTML page with an <h1> and <p> tag. If you wanted the first letter of your paragraph to be 24px, bolder and blue font, then you could use the pseudo-element first-letter. Notice that there are two colons between the <p> tag and first-letter. This is slightly different syntax for pseudo-elements.

Notice that there are two colons between the <p> tag and first-letter. This is slightly different syntax for pseudo-elements.

Now you know the basics of pseudo-classes and pseudo-elements. If you want to take a more detailed look you can go check out the W3C docs.