HTML & CSS Interview Question #57

What are pseudo-classes in CSS?

CSS Fundamentals, Selectors, Cascade, Specificity, Box Model, Units & Typography Mid-Level Intermediate

Quick Interview Answer

Pseudo-classes select elements based on a state, user interaction, document structure, or another condition rather than requiring an additional HTML class. Common examples include :hover, :focus, :checked, :disabled, :first-child, :nth-child(), :not(), and :required.

Detailed Explanation

Pseudo-classes are important for interactive and structural styling. Keyboard-accessible interfaces should not rely only on :hover; focus states must also be designed appropriately.

Code Example

.button:hover {
    transform: translateY(-1px);
}

.button:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 2px;
}

input:disabled {
    opacity: .6;
}

li:nth-child(odd) {
    background: #f8fafc;
}