Pseudo-elements and Classes

In this article we will look at pseudo elements and pseudo classes. We will learn what they are, how to use them and what’s the different between them.

What are Pseudo-classes?

A CSS pseudo-class is a special keyword added to selectors that specifies a special state of an element. For example, :hover can be used to select elements when the user hovers over them. In other words we add a style to an element based on external factors such as visitor interaction.

How to use Pseudo-classes?

Basic syntax

selector:pseudo-class-name {
   property: value;
}

We use a single colon before the pseudo class name.

Examples of pseudo-classes

Some of the examples of pseudo-classes include:

• :hover (adds a hover state on mouse over)
• :visited (changes the state of a link after it is visited)

Click the following link for a full list of pseudo-classes.

What are Pseudo-elements?

CSS pseudo-elements are used to style specific parts of an element. For example, ::first-line can be used to style the first line of a paragraph.

How to use Pseudo-elements?

Basic syntax

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

We use a double colon before the pseudo element name.

Examples of pseudo-elements

Some of the examples of pseudo-elements include:

• ::before (insert something before the content of its selector)
• ::after (insert something after the content of its selector)
• ::placeholder (it represents the placeholder text inside an input field or textarea)

Click the following link for a full list of pseudo-elements.