Tutorial 10 of 44 in series

Pseudo Classes

Style elements based on state or position

Abhishek Sharma 2026-05-30 Web Development / Frontend / CSS

23%

Pseudo Classes

Pseudo-classes target elements based on their state or position in the document. They start with a colon (:).

Demo: Interactive Pseudo-Classes (hover me)

HTML

<button class="btn">Hover Me</button>
<a href="#" class="link">Visit this link</a>
<ul class="list">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ul>

CSS

.btn {
padding: 8px 20px;
background: #6366f1;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
transition: 0.2s;
}
.btn:hover { background: #4f46e5; transform: scale(1.05); }
.link { color: #3b82f6; }
.link:visited { color: #7c3aed; }
.list li { padding: 4px 0; }
.list li:first-child { font-weight: bold; color: #059669; }
.list li:last-child { font-style: italic; color: #dc2626; }
.list li:nth-child(odd) { background: #f1f5f9; }

Live Output Window

Common Pseudo-Classes

Pseudo-Class	When It Applies
`:hover`	Mouse is over the element
`:focus`	Element has keyboard focus
`:active`	Element is being clicked
`:visited`	Link has been visited
`:first-child`	First child of its parent
`:last-child`	Last child of its parent
`:nth-child(n)`	Nth child of its parent
`:not(sel)`	Does not match the selector
`:empty`	Has no children

Pseudo-classes make your pages interactive and dynamic without JavaScript.

Keep learning

Related tutorials from across the library.

All tutorials

Tutorial2026-05-30

Introduction to CSS

Learn what CSS is and why it matters

Web Development / Frontend / CSS

CSSWeb Development

Tutorial2026-05-30

History of CSS

Understand how CSS evolved

Web Development / Frontend / CSS

CSSWeb Development

Tutorial2026-05-30

Adding CSS

Three ways to add CSS to a page

Web Development / Frontend / CSS

CSSWeb Development