CSS Pseudo-Class - Detailed Overview

Introduction to CSS Pseudo-Classes

CSS pseudo-classes are used to define the special state of an element. They allow you to apply styles to elements based on their state or position. Common pseudo-classes include:

• :hover
• :focus
• :visited
• :active
• :first-child

:hover

The :hover pseudo-class applies styles when the user hovers over an element:

a:hover {
    color: red;
}

:focus

The :focus pseudo-class applies styles to an element that has focus (e.g., an input field):

input:focus {
    background-color: yellow;
}

:visited

The :visited pseudo-class applies styles to links that have been visited by the user:

a:visited {
    color: purple;
}

:active

The :active pseudo-class applies styles to an element that is being activated by the user (e.g., a button being clicked):

button:active {
    background-color: green;
}

:first-child

The :first-child pseudo-class applies styles to the first child of its parent element:

p:first-child {
    color: orange;
}