Pseudo-Class Selector

A pseudo-class selector is used to style an HTML element based on its state or position.

What is a Pseudo-Class Selector?

A pseudo-class selector defines a special state of an HTML element.

Pseudo-classes are written using a colon : followed by the pseudo-class name.

Pseudo-Class Selector Flow

HTML Element
<a>

↓

Pseudo-Class
:hover

↓

State-Based CSS Style

Basic Syntax

selector:pseudo-class {
    property: value;
}

The colon : is used before the pseudo-class name.

Example 1: Hover

The :hover pseudo-class applies styles when the mouse pointer moves over an element.

a:hover {
    color: red;
}

Output

Move the mouse over this link

Example 2: First Child

The :first-child pseudo-class selects an element that is the first child of its parent.

p:first-child {
    color: green;
}

Output

First paragraph

Second paragraph

Example 3: Focus

The :focus pseudo-class applies styles when an input element receives focus.

input:focus {
    border-color: blue;
}

Output

Common Pseudo-Classes

Pseudo-Class	Meaning
`:hover`	Selects an element when the mouse is over it.
`:focus`	Selects an element when it receives focus.
`:first-child`	Selects the first child element.
`:last-child`	Selects the last child element.
`:active`	Selects an element while it is being activated.

Important Points

Pseudo-classes use the colon : symbol.
They are commonly used to style different element states.
Common examples include :hover, :focus, and :first-child.
Pseudo-classes can make web pages more interactive.

Summary

Pseudo-class selectors are used to style elements based on their state or position. They use the colon symbol and are commonly used for interactions such as hover, focus, and active states.