What Is It?
What Are Pseudo-classes and Pseudo-elements?
Pseudo-classes and pseudo-elements are two of the most powerful features in CSS. They let you style elements based on state, position, or relationship, and even insert content that does not exist in the HTML.
Pseudo-classes (single colon)
A pseudo-class selects an element based on a state or position. Examples: :hover (when the user points at it), :focus (when it is keyboard-focused), :nth-child(2n) (when it is the even-numbered child), :checked (when a checkbox is ticked).
button:hover { background: purple; }
input:focus { outline: 2px solid cyan; }
li:nth-child(odd) { background: #f1f5f9; }Pseudo-elements (double colon)
A pseudo-element targets a part of an element, or injects a 'fake' element. Examples: ::before and ::after inject content, ::first-letter targets the first character, ::selection styles selected text, ::placeholder styles the placeholder inside inputs.
.card::before {
content: 'NEW';
background: red;
color: white;
padding: 4px 8px;
}Why two colons for pseudo-elements? In CSS3, pseudo-elements got their own double-colon syntax (::before) to distinguish them from pseudo-classes. Browsers still accept the old single-colon form for backwards compatibility, but double colons are the modern standard.
Why Does It Matter?
Why Learn Pseudo-classes and Pseudo-elements?
1. Interactivity Without JavaScript
Hover effects, focus rings, checked states, form validation styling, all handled with CSS. No JavaScript, no event listeners, no bundle size. :hover, :focus, :valid, and :invalid handle the majority of interactive UI in a browser.
2. Less HTML, More Creativity
Need a decorative corner on a card? A tooltip arrow? A quote mark before a blockquote? A ribbon banner? None of these need extra HTML elements. ::before and ::after let you inject the content purely from CSS, keeping your HTML clean and semantic.
3. Pattern-Based Styling
Style every other row of a table, every third item in a grid, or only the last element of a list, without adding class names. :nth-child() is like a tiny query language for DOM position. Anika styled her entire homework table in 3 lines of CSS.
4. Modern Selectors Unlock New Patterns
Newer pseudo-classes like :is(), :where(), and especially :has() (the parent selector) let you write cleaner CSS and style elements based on what they contain. Things that used to require JavaScript now work with a single selector.
5. Accessibility for Free
:focus-visible shows focus rings only for keyboard users, not mouse clicks. :hover does nothing on touch devices, so you never punish mobile users. Semantic pseudo-classes make your site work well for every input device.
Detailed Explanation
A Tour of the Most Useful Pseudo-classes and Pseudo-elements
1. Interaction States
a:link { color: #7c3aed; } /* unvisited */
a:visited { color: #db2777; } /* already visited */
a:hover { color: #ec4899; text-decoration: underline; }
a:active { color: #f43f5e; } /* the instant it is clicked */
button:focus { outline: 2px solid #06b6d4; }
button:focus-visible { outline: 2px solid #06b6d4; } /* keyboard only */
button:disabled { opacity: 0.5; cursor: not-allowed; }:focus-visible is the modern choice: it only shows the focus ring when the user navigates with the keyboard, not when they click with a mouse. Clean and accessible.
2. Form States
input:required { border-left: 3px solid #f59e0b; }
input:valid { border-color: #10b981; }
input:invalid { border-color: #ef4444; }
input:disabled { background: #f1f5f9; }
input:checked { accent-color: #a855f7; }
/* Placeholder-shown: input is empty */
input:placeholder-shown { font-style: italic; color: #94a3b8; }This lets you show live validation feedback without any JavaScript. A red border appears the moment the user's input becomes invalid.
3. Structural / Positional
li:first-child { font-weight: bold; }
li:last-child { border-bottom: none; }
li:nth-child(2) { color: red; }
li:nth-child(odd) { background: #f8fafc; } /* 1st, 3rd, 5th... */
li:nth-child(even) { background: #ffffff; } /* 2nd, 4th, 6th... */
li:nth-child(3n) { color: purple; } /* every 3rd */
li:nth-child(3n+1) { color: teal; } /* 1st, 4th, 7th... */
li:only-child { color: gray; } /* the only child of its parent */
li:empty { display: none; } /* has no content */Zebra stripes for tables take 2 lines. Highlighting every third grid item takes 1. This is what designers mean when they say 'pattern-based' styling.
4. Negation and Grouping: :not(), :is(), :where()
/* Not: exclude something */
li:not(.active) { color: gray; }
button:not(:disabled):hover { background: purple; }
/* Is: group selectors without copying */
:is(h1, h2, h3) { font-family: 'Syne', sans-serif; }
/* Equivalent to: h1, h2, h3 { ... } but composable */
/* Where: like :is() but with zero specificity */
:where(article, section) p { line-height: 1.7; }
/* zero specificity means it is easy to override */5. The Parent Selector: :has()
For years CSS only looked downward. :has() finally lets you select a parent based on its children. This is the biggest new CSS feature in a decade.
/* Style a card that contains an image */
.card:has(img) { padding: 0; }
/* Style a form that has an invalid input */
form:has(:invalid) button { opacity: 0.5; pointer-events: none; }
/* Style a label that has a checked checkbox */
label:has(input:checked) { background: #7c3aed; color: white; }6. Target and Empty
section:target { background: #fef3c7; } /* the section matching #hash in URL */
div:empty { display: none; } /* element with no content at all */7. Pseudo-elements: ::before and ::after
These inject a 'fake' element at the start or end of an element's content. They need the content property to render.
blockquote::before { content: '"'; font-size: 64px; color: #a855f7; }
blockquote::after { content: '"'; font-size: 64px; color: #a855f7; }
.new::after {
content: 'NEW';
background: red;
color: white;
padding: 2px 8px;
border-radius: 999px;
margin-left: 8px;
font-size: 11px;
}
.tooltip::after {
content: attr(data-tip); /* read the data-tip attribute */
position: absolute;
bottom: -30px; left: 0;
background: black; color: white;
padding: 4px 8px; border-radius: 6px;
opacity: 0; transition: opacity 0.2s;
}
.tooltip:hover::after { opacity: 1; }8. Text Pseudo-elements
p::first-letter { font-size: 3em; float: left; color: #7c3aed; }
p::first-line { font-weight: bold; }
::selection { background: #a855f7; color: white; }
::placeholder { color: #94a3b8; font-style: italic; }
li::marker { color: #7c3aed; font-size: 1.2em; }::selection styles the highlighted text when a user selects anything. ::placeholder styles the hint text inside form inputs. ::marker targets the bullet or number of a list item. You can finally color bullets without extra markup.
9. Creative Patterns
/* Ribbon on a card */
.card::before {
content: 'SALE';
position: absolute; top: 12px; right: -28px;
background: #ef4444; color: white;
padding: 4px 36px; font-size: 12px;
transform: rotate(45deg);
}
/* Animated underline on hover */
.nav a { position: relative; }
.nav a::after {
content: '';
position: absolute;
left: 0; bottom: -4px;
width: 100%; height: 2px;
background: #a855f7;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.3s;
}
.nav a:hover::after {
transform: scaleX(1);
transform-origin: left;
}No extra HTML, no JavaScript, just a sliding underline that knows which direction to grow from.
Code Examples
Zebra Stripe Table with :nth-child
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: 'Segoe UI', sans-serif; background: #f8fafc; padding: 40px; }
h1 { color: #7c3aed; margin-bottom: 16px; }
table { border-collapse: collapse; width: 100%; max-width: 700px; background: white; box-shadow: 0 4px 20px rgba(0,0,0,0.08); border-radius: 12px; overflow: hidden; }
th { background: #7c3aed; color: white; padding: 14px; text-align: left; }
td { padding: 12px 14px; color: #334155; }
tr:nth-child(even) { background: #f1f5f9; }
tr:hover { background: #ede9fe; }
tr:last-child td { font-weight: bold; color: #7c3aed; }
</style>
</head>
<body>
<h1>Student Scores</h1>
<table>
<thead><tr><th>Student</th><th>Chapter</th><th>Score</th></tr></thead>
<tbody>
<tr><td>Aarav</td><td>Variables</td><td>94</td></tr>
<tr><td>Priya</td><td>Variables</td><td>91</td></tr>
<tr><td>Rohan</td><td>Variables</td><td>88</td></tr>
<tr><td>Ishita</td><td>Variables</td><td>97</td></tr>
<tr><td>Vivaan</td><td>Variables</td><td>85</td></tr>
<tr><td>Anika</td><td>Variables</td><td>99</td></tr>
<tr><td>Class Average</td><td>---</td><td>92.3</td></tr>
</tbody>
</table>
</body>
</html>tr:nth-child(even) gives every even-numbered row a light background for zebra striping. tr:hover highlights the row the user is pointing at. tr:last-child td styles the summary row. All three effects come from pseudo-classes with zero extra HTML.A clean table with purple header, zebra-striped rows, a subtle hover highlight, and a bold purple summary row at the bottom.
Tooltip Using ::after and attr()
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: 'Segoe UI', sans-serif; background: #0f172a; color: #f1f5f9; padding: 80px 40px; display: flex; gap: 40px; justify-content: center; }
.tip {
position: relative;
padding: 12px 24px;
background: #7c3aed;
color: white;
border-radius: 10px;
cursor: pointer;
font-weight: 600;
}
.tip::after {
content: attr(data-tip);
position: absolute;
left: 50%;
bottom: calc(100% + 10px);
transform: translateX(-50%);
background: #0b1120;
color: #e2e8f0;
padding: 8px 14px;
border-radius: 8px;
font-size: 13px;
font-weight: 400;
white-space: nowrap;
box-shadow: 0 6px 16px rgba(0,0,0,0.4);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s, transform 0.2s;
}
.tip::before {
content: '';
position: absolute;
left: 50%;
bottom: calc(100% + 4px);
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: #0b1120;
opacity: 0;
transition: opacity 0.2s;
}
.tip:hover::after,
.tip:hover::before {
opacity: 1;
transform: translateX(-50%) translateY(-4px);
}
</style>
</head>
<body>
<button class="tip" data-tip="Meera's latest project">Hover me</button>
<button class="tip" data-tip="Click to save changes">Save</button>
<button class="tip" data-tip="Warning: this deletes everything">Delete</button>
</body>
</html>Each button has a
data-tip attribute. The CSS injects that attribute's text via ::after using content: attr(data-tip). The ::before draws a tiny triangle pointer. Both are hidden with opacity: 0 and revealed on hover. No JavaScript, one CSS rule per button.Three purple buttons. Hovering any button reveals a dark tooltip above it with a small downward-pointing arrow, showing the text from the data-tip attribute.
Custom Blockquote with ::before and ::after
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: 'Georgia', serif; background: #fafaf9; padding: 60px 40px; color: #0f172a; max-width: 720px; margin: 0 auto; }
blockquote {
position: relative;
background: white;
padding: 48px 48px 48px 64px;
border-left: 5px solid #7c3aed;
border-radius: 0 12px 12px 0;
font-size: 22px;
line-height: 1.5;
color: #334155;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
margin: 40px 0;
}
blockquote::before {
content: open-quote;
position: absolute;
top: -20px;
left: 12px;
font-size: 120px;
line-height: 1;
color: #a855f7;
font-family: 'Georgia', serif;
}
blockquote::after {
content: '';
position: absolute;
right: 20px; bottom: 20px;
width: 40px; height: 3px;
background: linear-gradient(90deg, #a855f7, #ec4899);
border-radius: 2px;
}
blockquote cite {
display: block;
margin-top: 16px;
font-size: 14px;
color: #7c3aed;
font-style: normal;
font-weight: 700;
}
</style>
</head>
<body>
<blockquote>
Learning to code changed how I think about problems. CSS variables and pseudo-elements made me fall in love with design.
<cite>- Ishita, age 15</cite>
</blockquote>
<blockquote>
You do not need a JavaScript library for nice quotation marks. ::before and ::after handle it beautifully.
<cite>- Meera, age 13</cite>
</blockquote>
</body>
</html>::before uses content: open-quote to render a large purple quote mark floating above the top-left. ::after draws a small decorative gradient bar in the bottom-right. No extra HTML, and the quotes scale with the text automatically.Two elegant blockquotes. Each has a large decorative purple opening quote mark in the top-left, a purple left border, a subtle gradient accent in the bottom-right, and a styled citation.
Sliding Underline on Nav Links
<!DOCTYPE html>
<html>
<head>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', sans-serif; background: #0f172a; color: white; min-height: 100vh; }
nav { display: flex; gap: 32px; padding: 24px 40px; background: #0b1120; border-bottom: 1px solid #1e293b; }
nav a {
position: relative;
color: #cbd5e1;
text-decoration: none;
font-size: 16px;
padding: 6px 0;
transition: color 0.2s;
}
nav a::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, #a855f7, #06b6d4);
transform: scaleX(0);
transform-origin: right;
transition: transform 0.3s ease;
}
nav a:hover {
color: white;
}
nav a:hover::after {
transform: scaleX(1);
transform-origin: left;
}
main { padding: 80px 40px; text-align: center; }
h1 { color: #a855f7; font-size: 40px; }
</style>
</head>
<body>
<nav>
<a href="#">Home</a>
<a href="#">Projects</a>
<a href="#">Blog</a>
<a href="#">Contact</a>
</nav>
<main>
<h1>Vivaan's Portfolio</h1>
</main>
</body>
</html>Each nav link has a 2px gradient bar injected via
::after. It starts at scaleX(0) (invisible) with transform-origin: right. On hover it scales to 1 with transform-origin: left, creating a slide-in effect. When the mouse leaves, it retracts back to the right. Pure CSS, no JavaScript.A navigation bar with 4 links. Hovering any link reveals a gradient bar that slides in from the left. Moving away slides it back out to the right.
Form Validation Styling with :valid and :invalid
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: 'Segoe UI', sans-serif; background: #f8fafc; padding: 40px; display: flex; justify-content: center; }
.form { background: white; padding: 32px; border-radius: 16px; max-width: 400px; width: 100%; box-shadow: 0 10px 30px rgba(0,0,0,0.08); }
h2 { color: #0f172a; margin-bottom: 24px; }
label { display: block; margin-bottom: 16px; font-size: 13px; color: #475569; }
input {
display: block;
width: 100%;
padding: 12px;
margin-top: 6px;
border: 2px solid #e2e8f0;
border-radius: 8px;
font-size: 15px;
outline: none;
transition: border-color 0.2s;
}
input:focus { border-color: #7c3aed; }
input:placeholder-shown { font-style: italic; }
input:not(:placeholder-shown):valid { border-color: #10b981; }
input:not(:placeholder-shown):invalid { border-color: #ef4444; }
input:required + .req::before { content: ' *'; color: #ef4444; }
button {
width: 100%;
padding: 12px;
background: #7c3aed;
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
margin-top: 8px;
}
button:disabled { opacity: 0.4; cursor: not-allowed; }
form:has(input:invalid) button { opacity: 0.4; cursor: not-allowed; }
</style>
</head>
<body>
<form class="form">
<h2>Sign Up</h2>
<label>Name<input type="text" placeholder="Your name" minlength="2" required></label>
<label>Email<input type="email" placeholder="you@example.com" required></label>
<label>Age<input type="number" placeholder="10-18" min="10" max="18" required></label>
<button type="submit">Create Account</button>
</form>
</body>
</html>Inputs get a green border when valid and a red border when invalid, but only once the user has started typing (
:not(:placeholder-shown)). The form:has(input:invalid) button rule disables the submit button whenever any input is invalid. All validation styling is pure CSS, no JavaScript.A clean signup form. As you type, fields turn green when valid and red when invalid. The submit button is disabled until every field is valid.
Ribbon and Badge Effects with ::before
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: 'Segoe UI', sans-serif; background: #f8fafc; padding: 40px; display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); max-width: 1000px; margin: 0 auto; }
.product {
position: relative;
background: white;
border-radius: 16px;
padding: 24px;
box-shadow: 0 6px 20px rgba(0,0,0,0.08);
overflow: hidden;
}
.product h3 { color: #0f172a; font-size: 20px; margin-bottom: 8px; }
.product p { color: #64748b; font-size: 14px; line-height: 1.6; }
.product .price { display: block; margin-top: 16px; font-size: 24px; font-weight: 700; color: #7c3aed; }
/* Ribbon on the top-right corner */
.product.sale::before {
content: 'SALE';
position: absolute;
top: 18px; right: -40px;
background: #ef4444;
color: white;
padding: 6px 46px;
font-size: 12px;
font-weight: 800;
letter-spacing: 1px;
transform: rotate(45deg);
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
/* NEW badge */
.product.new::after {
content: 'NEW';
position: absolute;
top: 16px; left: 16px;
background: linear-gradient(135deg, #a855f7, #ec4899);
color: white;
padding: 4px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
}
</style>
</head>
<body>
<div class="product sale">
<h3>Ishita's HTML Book</h3>
<p>Learn HTML and CSS from scratch with 50 projects.</p>
<span class="price">Rs 499</span>
</div>
<div class="product new">
<h3>Aarav's CSS Guide</h3>
<p>Master CSS variables, Grid, and animations.</p>
<span class="price">Rs 399</span>
</div>
<div class="product sale new">
<h3>Kavya's JS Bundle</h3>
<p>JavaScript basics to advanced in one bundle.</p>
<span class="price">Rs 899</span>
</div>
</body>
</html>.product.sale::before injects a rotated red ribbon in the corner. .product.new::after injects a pill-shaped gradient badge in the top-left. The third card uses both classes and shows both decorations at once. No extra markup, just pseudo-elements.Three product cards. The first has a diagonal red SALE ribbon in the top-right corner. The second has a purple-pink NEW badge in the top-left. The third has both decorations at the same time.
Common Mistakes
Forgetting the content Property on ::before and ::after
.card::before {
background: red;
width: 20px;
height: 20px;
/* No content property - nothing renders! */
}The pseudo-element does not appear at all. Without <code>content</code>, <code>::before</code> and <code>::after</code> are not generated by the browser.
.card::before {
content: ''; /* Even an empty string works */
background: red;
width: 20px;
height: 20px;
display: block;
}The
content property is required for ::before and ::after. An empty string content: '' is fine when you only want a decorative shape. Without content, the browser simply does not render the pseudo-element.Misreading :nth-child() Formulas
/* Wanted every 3rd row, starting from the first */
tr:nth-child(3n) {
background: #f1f5f9;
}
/* This selects the 3rd, 6th, 9th... - NOT the 1st, 4th, 7th! */The pattern starts at row 3 instead of row 1. <code>3n</code> means 3, 6, 9, 12 (n starting at 1 internally, or 0 giving 0 which does not exist).
tr:nth-child(3n+1) {
background: #f1f5f9;
/* Now selects 1st, 4th, 7th... */
}The formula is
an+b where n goes 0, 1, 2, 3... and the result must be a positive integer. 3n+1 gives 1, 4, 7, 10. 3n gives 3, 6, 9. Sketch a few values to check your formula.Single Colon vs Double Colon Confusion
.card:before {
content: 'NEW';
}
/* This works but is the old syntax */It still works in most browsers for backwards compatibility, but it mixes up the meaning of pseudo-classes (single colon) and pseudo-elements (double colon).
.card::before {
content: 'NEW';
}
/* Modern CSS3 syntax - use this */Pseudo-classes use one colon (
:hover, :first-child). Pseudo-elements use two colons (::before, ::after, ::first-letter). The double colon was introduced in CSS3 to distinguish them. Always use two colons for pseudo-elements in new code.Using :hover on Interactive States Alone (No Keyboard Support)
button:hover {
background: purple;
outline: 2px solid cyan;
}
/* Keyboard users see no feedback! */Users who navigate with the keyboard (Tab key) get no visual feedback because only <code>:hover</code> is styled, not <code>:focus</code>.
button:hover,
button:focus-visible {
background: purple;
outline: 2px solid cyan;
}Always pair
:hover with :focus-visible (or :focus) so keyboard users see the same affordance as mouse users. :focus-visible is preferred because it only shows the ring for keyboard focus, not for mouse clicks.Summary
- Pseudo-classes (single colon, like <code>:hover</code>, <code>:focus</code>, <code>:nth-child</code>) select elements based on state or position. Pseudo-elements (double colon, like <code>::before</code>, <code>::after</code>, <code>::first-letter</code>) target parts of an element or inject new content.
- <code>:hover</code>, <code>:focus</code>, <code>:focus-visible</code>, <code>:active</code>, <code>:disabled</code>, and <code>:checked</code> handle the majority of interactive UI states without JavaScript. Always pair <code>:hover</code> with <code>:focus-visible</code> for accessibility.
- Form validation styling is free: <code>:valid</code>, <code>:invalid</code>, <code>:required</code>, and <code>:placeholder-shown</code> let you show live feedback as the user types. Combine <code>:not(:placeholder-shown)</code> with <code>:invalid</code> to only show red after the user has started typing.
- <code>:nth-child(an+b)</code> is a tiny query language: <code>odd</code>, <code>even</code>, <code>2n</code>, <code>3n+1</code>, etc. Use it for zebra stripes, grid patterns, and highlighting specific items without extra classes.
- <code>:not()</code> excludes, <code>:is()</code> groups selectors without rewriting them, and <code>:where()</code> is like <code>:is()</code> but with zero specificity (useful for base styles that are easy to override).
- <code>:has()</code> is the parent selector, finally. Style an element based on what it contains: <code>form:has(:invalid) button</code>, <code>.card:has(img)</code>, <code>label:has(input:checked)</code>. This used to require JavaScript.
- <code>::before</code> and <code>::after</code> require a <code>content</code> property to render. Even <code>content: ''</code> is enough for a pure decoration. They can read attributes with <code>content: attr(data-tip)</code>, perfect for tooltips.
- <code>::first-letter</code> and <code>::first-line</code> style the first character or line of a paragraph (drop caps, magazine styling). <code>::selection</code> styles highlighted text. <code>::placeholder</code> styles form placeholders. <code>::marker</code> styles list bullets or numbers.
- Creative patterns are mostly pseudo-elements: ribbons, badges, tooltips, sliding underlines, quote marks, custom bullets, decorative lines. All without adding a single extra HTML element.