Pseudo-Classes
📌 Covered in this chapter:
:hover · :active · :focus · :focus-visible · :visited · :checked · :disabled · :nth-child() · :not() · :is() · :where() · :has()
Welcome to Chapter 5: Pseudo-Classes — part of the CSS Complete Roadmap. This lesson covers all subtopics with clear explanations, code examples, and best practices used in professional web development.
1What Are Pseudo-Classes?
Pseudo-classes element state or position based ga style apply chestayi — hover, focus, nth child, etc. Syntax: single colon : prefix.
CSS — Common Pseudo-Classes▶ Try in Editor
button:hover {
background-color: #2563eb;
}
input:focus-visible {
outline: 3px solid #93c5fd;
outline-offset: 2px;
}
li:nth-child(even) {
background: #f3f4f6;
}2Interactive States — :hover, :active, :focus
:hover— mouse pointer element meedha unnapudu:active— click/press chesinapudu (momentary):focus— keyboard or click tho element focused:focus-visible— keyboard navigation focus matrame (accessibility best practice)
CSS
a:visited { color: #7c3aed; }
input:disabled { opacity: 0.5; cursor: not-allowed; }
input:enabled { border-color: #cbd5e1; }
input:checked + label { font-weight: 700; }3Structural Pseudo-Classes — :first-child, :nth-child()
CSS
li:first-child { font-weight: 700; }
li:last-child { border-bottom: none; }
li:nth-child(odd) { background: #f8fafc; }
li:nth-child(3n) { color: #3b82f6; }4Modern Functional Pseudo-Classes — :not(), :is(), :where(), :has()
CSS — Modern Selectors
/* Exclude disabled buttons */
button:not(:disabled) { cursor: pointer; }
/* Group selectors with zero specificity boost (where) */
:where(h1, h2, h3) { line-height: 1.2; }
/* Parent selector — card with image inside */
.card:has(img) { padding-top: 0; }
/* Form invalid state on parent */
.form-group:has(input:invalid) { border-color: red; }:has() — "parent selector" revolution! Previously impossible parent styling ippudu possible.