Beginner LevelCSS & Modern Layouts
What are CSS pseudo-classes and how do :hover, :focus, :nth-child(), and :is() work?
❓ Interview Prompt: Explain CSS pseudo-classes, their syntax, and practical use cases for interactive and structural styling.
Pseudo-classes select elements based on their state or position in the DOM tree without adding extra HTML classes:
State-based Pseudo-classes:
•
:hover — when the cursor is over the element.•
:focus — when the element receives keyboard focus.•
:focus-visible — focus ring only shown for keyboard navigation (not mouse clicks).•
:active — during mouse press.•
:disabled / :enabled — form control states.Structural Pseudo-classes:
•
:first-child / :last-child — first or last sibling.•
:nth-child(2n) — every even child. :nth-child(3n+1) — every 3rd starting from 1st.•
:not(.hidden) — negation: selects elements that do NOT match.•
:is(h1, h2, h3) — matches any of the listed selectors (reduces repetition).•
:has(.icon) — parent selector: selects elements containing a child matching the argument.Code Implementation Example
css
/* Interactive button states */
.btn:hover { background: #3d2c2e; color: #f5edf0; }
.btn:focus-visible { outline: 3px solid #886f68; outline-offset: 2px; }
.btn:active { transform: scale(0.97); }
/* Zebra-stripe table rows */
tr:nth-child(even) { background: #f5edf0; }
/* Modern :has() parent selector */
.card:has(img) { padding: 0; }
.form-group:has(:invalid) { border-color: red; }💡Interactive states, structural nth-child, and modern :has() selector.
🎯 Interview Key Takeaway
Use :focus-visible instead of :focus for accessible keyboard-only focus rings. Use :has() as a parent selector in 2026.
#Pseudo-classes#Selectors#Interactivity#Beginner
Back to all CSS & Modern Layouts Questions→