Unlocking the Power of CSS Pseudo-Classes: A Comprehensive Guide
CSS pseudo-classes are powerful tools that allow you to style elements based on their state, position, or user interactions. By mastering these pseudo-classes, you can create dynamic and interactive designs. In this guide, we'll explore a variety of CSS pseudo-classes, providing detailed explanations and practical examples.
Interactive States
:active - The Engaged Element
The :active pseudo-class applies when an element is being activated by the user, such as during a mouse click.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Active Pseudo-Class Example</title>
<style>
/* :active - Applies when an element is being clicked */
button:active {
background-color: green;
}
</style>
</head>
<body>
<button>Click Me</button>
</body>
</html>
:hover - The Overachiever
The :hover pseudo-class applies when the user hovers over an element with their cursor.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover Pseudo-Class Example</title>
<style>
/* :hover - Applies when the user hovers over an element */
a:hover {
color: blue;
}
</style>
</head>
<body>
<a href="#">Hover Over Me</a>
</body>
</html>
:focus - The Focused Attention
The :focus pseudo-class targets an element that has received focus, such as an input field.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Focus Pseudo-Class Example</title>
<style>
/* :focus - Applies when an element receives focus */
input:focus {
border-color: orange;
}
</style>
</head>
<body>
<input type="text" placeholder="Type here">
</body>
</html>
:focus-visible - The Visible Focus
The :focus-visible pseudo-class targets elements that should show visible focus styles based on user interaction.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Focus Visible Pseudo-Class Example</title>
<style>
/* :focus-visible - Applies visible focus styles based on user interaction */
button:focus-visible {
outline: 2px solid yellow;
}
</style>
</head>
<body>
<button>Focus Me</button>
</body>
</html>
:focus-within - The Inner Focus
The :focus-within pseudo-class applies to a parent element when any of its children have focus.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Focus Within Pseudo-Class Example</title>
<style>
/* :focus-within - Applies to a parent when any child element has focus */
.form-group:focus-within {
border: 2px solid red;
}
</style>
</head>
<body>
<div class="form-group">
<input type="text" placeholder="Focus inside me">
</div>
</body>
</html>
Link and Navigation
:link - The Unvisited Link
The :link pseudo-class targets links that have not been visited yet.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Link Pseudo-Class Example</title>
<style>
/* :link - Applies to unvisited links */
a:link {
color: gray;
}
</style>
</head>
<body>
<a href="#">Unvisited Link</a>
</body>
</html>
:visited - The Past Link
The :visited pseudo-class styles links that the user has already visited.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Visited Pseudo-Class Example</title>
<style>
/* :visited - Applies to visited links */
a:visited {
color: purple;
}
</style>
</head>
<body>
<a href="#">Visited Link</a>
</body>
</html>
:any-link - The Versatile Link
The :any-link pseudo-class targets both :link and :visited states.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Any Link Pseudo-Class Example</title>
<style>
/* :any-link - Applies to both link and visited states */
a:any-link {
color: teal;
}
</style>
</head>
<body>
<a href="#">Any Link</a>
</body>
</html>
:local-link - The Local Explorer
The :local-link pseudo-class targets links within the same domain or page.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Local Link Pseudo-Class Example</title>
<style>
/* :local-link - Applies to links within the same domain or page */
a:local-link {
color: olive;
}
</style>
</head>
<body>
<a href="#section">Local Link</a>
</body>
</html>
Form States
:checked - The Selected Option
The :checked pseudo-class applies to input elements that are checked or selected, such as checkboxes or radio buttons.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checked Pseudo-Class Example</title>
<style>
/* :checked - Applies to checked or selected input elements */
input:checked {
background-color: yellow;
}
</style>
</head>
<body>
<input type="checkbox" id="checkbox1">
<label for="checkbox1">Check Me</label>
</body>
</html>
:disabled - The Unavailable
The :disabled pseudo-class targets elements that are disabled and cannot be interacted with.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disabled Pseudo-Class Example</title>
<style>
/* :disabled - Applies to disabled elements */
input:disabled {
background-color: lightgray;
}
</style>
</head>
<body>
<input type="text" disabled value="Disabled Field">
</body>
</html>
:enabled - The Available
The :enabled pseudo-class targets elements that are enabled and available for interaction.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enabled Pseudo-Class Example</title>
<style>
/* :enabled - Applies to enabled elements */
input:enabled {
border: 2px solid green;
}
</style>
</head>
<body>
<input type="text" value="Enabled Field">
</body>
</html>
:required - The Mandatory Field
The :required pseudo-class targets input fields that are required to be filled out before form submission.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Required Pseudo-Class Example</title>
<style>
/* :required - Applies to required input fields */
input:required {
border:
2px solid red;
}
</style>
</head>
<body>
<input type="text" required placeholder="Required Field">
</body>
</html>
:optional - The Non-Mandatory Field
The :optional pseudo-class targets input fields that are not required for form submission.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Optional Pseudo-Class Example</title>
<style>
/* :optional - Applies to optional input fields */
input:optional {
border: 2px solid blue;
}
</style>
</head>
<body>
<input type="text" placeholder="Optional Field">
</body>
</html>
Structural Pseudo-Classes
:first-child - The Firstborn
The :first-child pseudo-class targets the first child of its parent.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>First Child Pseudo-Class Example</title>
<style>
/* :first-child - Applies to the first child of a parent element */
ul li:first-child {
color: red;
}
</style>
</head>
<body>
<ul>
<li>First Item</li>
<li>Second Item</li>
</ul>
</body>
</html>
:last-child - The Lastborn
The :last-child pseudo-class targets the last child of its parent.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Last Child Pseudo-Class Example</title>
<style>
/* :last-child - Applies to the last child of a parent element */
ul li:last-child {
color: green;
}
</style>
</head>
<body>
<ul>
<li>First Item</li>
<li>Last Item</li>
</ul>
</body>
</html>
:first-of-type - The Pioneer
The :first-of-type pseudo-class applies to the first element of its type within its parent.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>First of Type Pseudo-Class Example</title>
<style>
/* :first-of-type - Applies to the first element of its type within a parent */
p:first-of-type {
font-weight: bold;
}
</style>
</head>
<body>
<p>First Paragraph</p>
<p>Second Paragraph</p>
</body>
</html>
:last-of-type - The Finalist
The :last-of-type pseudo-class targets the last element of its type within its parent.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Last of Type Pseudo-Class Example</title>
<style>
/* :last-of-type - Applies to the last element of its type within a parent */
p:last-of-type {
font-style: italic;
}
</style>
</head>
<body>
<p>First Paragraph</p>
<p>Last Paragraph</p>
</body>
</html>
:only-child - The Sole Survivor
The :only-child pseudo-class applies to an element that is the only child of its parent.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Only Child Pseudo-Class Example</title>
<style>
/* :only-child - Applies to an element that is the only child of its parent */
.container:only-child {
background-color: lightblue;
}
</style>
</head>
<body>
<div class="container">I am the only child</div>
</body>
</html>
:only-of-type - The Unique Type
The :only-of-type pseudo-class targets the only element of its type within its parent.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Only of Type Pseudo-Class Example</title>
<style>
/* :only-of-type - Applies to the only element of its type within a parent */
div:only-of-type {
border: 2px dashed orange;
}
</style>
</head>
<body>
<div>This is the only div</div>
</body>
</html>
Miscellaneous Pseudo-Classes
:empty - The Vacant
The :empty pseudo-class applies to elements that have no children.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Empty Pseudo-Class Example</title>
<style>
/* :empty - Applies to elements with no children */
.empty-box:empty {
background-color: gray;
}
</style>
</head>
<body>
<div class="empty-box"></div>
</body>
</html>
:not() - The Exclusion Zone
The :not() pseudo-class applies to elements that do not match the given selector.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Not Pseudo-Class Example</title>
<style>
/* :not() - Applies to elements that do not match the given selector */
div:not(.exclude) {
color: red;
}
</style>
</head>
<body>
<div>This is red</div>
<div class="exclude">This is not red</div>
</body>
</html>
:nth-child() - The Pattern Matcher
The :nth-child() pseudo-class targets elements based on their position in a parent’s children list.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nth Child Pseudo-Class Example</title>
<style>
/* :nth-child() - Applies to elements based on their position in the parent */
li:nth-child(odd) {
background-color: lightgray;
}
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
:nth-of-type() - The Type Matcher
The :nth-of-type() pseudo-class targets elements of a specific type based on their position.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nth of Type Pseudo-Class Example</title>
<style>
/* :nth-of-type() - Applies to elements of a specific type based on their position */
p:nth-of-type(2) {
color: red;
}
</style>
</head>
<body>
<p>First Paragraph</p>
<p>Second Paragraph</p>
</body>
</html>
:lang() - The Language Selector
The :lang() pseudo-class targets elements based on their language attribute.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lang Pseudo-Class Example</title>
<style>
/* :lang() - Applies to elements with a specific language attribute */
p:lang(fr) {
color: blue;
}
</style>
</head>
<body>
<p lang="fr">Bonjour</p>
<p lang="en">Hello</p>
</body>
</html>
:root - The Document Root
The :root pseudo-class targets the highest-level parent element in the document, often used for defining CSS variables.
HTML:
<!DOCTYPE html>
<html lang="en
">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Root Pseudo-Class Example</title>
<style>
/* :root - Applies to the root element of the document */
:root {
--main-bg-color: coral;
}
body {
background-color: var(--main-bg-color);
}
</style>
</head>
<body>
<p>The background color is defined by the :root pseudo-class.</p>
</body>
</html>
:current - The Current Item
The :current pseudo-class applies to the currently active item in a set, like a carousel slide or tab.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Current Pseudo-Class Example</title>
<style>
/* :current - Applies to the currently active item */
.current {
background-color: lightblue;
}
</style>
</head>
<body>
<div class="carousel">
<div class="item current">Current Slide</div>
<div class="item">Other Slide</div>
</div>
</body>
</html>
:future - The Upcoming
The :future pseudo-class applies to elements that are scheduled to appear in a future state.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Future Pseudo-Class Example</title>
<style>
/* :future - Applies to elements scheduled to appear in the future */
.future {
color: gray;
}
</style>
</head>
<body>
<div class="future">Future Element</div>
</body>
</html>
:past - The Previous
The :past pseudo-class applies to elements that have been active or relevant in the past.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Past Pseudo-Class Example</title>
<style>
/* :past - Applies to elements that have been active in the past */
.past {
color: lightgray;
}
</style>
</head>
<body>
<div class="past">Past Element</div>
</body>
</html>
:modal - The Pop-Up
The :modal pseudo-class applies to elements that are being displayed as a modal dialog.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modal Pseudo-Class Example</title>
<style>
/* :modal - Applies to modal dialog elements */
.modal {
display: block;
background-color: rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<div class="modal">This is a modal dialog</div>
</body>
</html>
:popover-open - The Open Popover
The :popover-open pseudo-class targets elements that are open as popovers.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Popover Open Pseudo-Class Example</title>
<style>
/* :popover-open - Applies to elements that are open as popovers */
.popover-open {
display: block;
background-color: lightcoral;
}
</style>
</head>
<body>
<div class="popover-open">This is an open popover</div>
</body>
</html>
:playing - The Active Player
The :playing pseudo-class applies to media elements that are currently playing.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Playing Pseudo-Class Example</title>
<style>
/* :playing - Applies to media elements that are currently playing */
video:playing {
border: 2px solid green;
}
</style>
</head>
<body>
<video src="video.mp4" controls></video>
</body>
</html>
:paused - The Stopped Player
The :paused pseudo-class applies to media elements that are currently paused.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Paused Pseudo-Class Example</title>
<style>
/* :paused - Applies to media elements that are currently paused */
video:paused {
border: 2px solid red;
}
</style>
</head>
<body>
<video src="video.mp4" controls></video>
</body>
</html>
:placeholder-shown - The Placeholder Display
The :placeholder-shown pseudo-class applies to input elements that are currently showing their placeholder text.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Placeholder Shown Pseudo-Class Example</title>
<style>
/* :placeholder-shown - Applies to elements currently showing placeholder text */
input:placeholder-shown {
border: 2px dashed gray;
}
</style>
</head>
<body>
<input type="text" placeholder="Enter text here">
</body>
</html>
:volume-locked - The Muted Volume
The :volume-locked pseudo-class applies to media elements that have their volume locked or muted.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Volume Locked Pseudo-Class Example</title>
<style>
/* :volume-locked - Applies to media elements with volume locked or muted */
video:volume-locked {
border: 2px solid darkgray;
}
</style>
</head>
<body>
<video src="video.mp4" muted controls></video>
</body>
</html>
:defined - The Defined Element
The :defined pseudo-class targets elements that are fully defined, often used with custom elements.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Defined Pseudo-Class Example</title>
<style>
/* :defined - Applies to fully defined elements */
.defined-element:defined {
background-color: lightyellow;
}
</style>
</head>
<body>
<div class="defined-element">Defined Element</div>
</body>
</html>
:state() - The Custom State
The :state() pseudo-class applies to elements based on custom-defined states.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>State Pseudo-Class Example</title>
<style>
/* :state() - Applies to elements based on custom-defined states */
.state-active:state(active) {
color: green;
}
</style>
</head>
<body>
<div class="state-active">Active State</div>
</body>
</html>
:where() - The Inclusive Selector
The :where() pseudo-class applies styles to elements based on a specific selector.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Where Pseudo-Class Example</title>
<style>
/* :where() - Applies to elements matching a specific selector */
:where(.container) p {
color: brown;
}
</style>
</head>
<body>
<div class="container">
<p>This paragraph is within a container.</p>
</div>
</body>
</html>
Feel free to use these examples as a reference or starting point for incorporating CSS pseudo-classes into your own projects. Each pseudo-class offers unique capabilities to style elements dynamically based on various states and conditions.
Top comments (2)
Some of the pseudo classes are wrong in the examples. Like :current and :popover-open
Your examples are showing traditional classes like .current instead of the pseudo-class :current
Sorry, we will correct it.