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.