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.