How do CSS pseudo-classes and pseudo-elements differ?
Learn how CSS pseudo-classes and pseudo-elements differ, when to use single vs double colons, and how to style states and generated content with examples.
Expected Interview Answer
A pseudo-class selects an existing element based on its state or position (like :hover or :first-child), while a pseudo-element creates and styles a virtual part of an element that isn't in the DOM (like ::before or ::first-line).
Pseudo-classes use a single colon and target real elements when they are in a particular condition — being hovered, checked, focused, or the nth child. Pseudo-elements use a double colon (single colon still works for legacy ones) and let you style a sub-part or inject generated content that has no HTML markup of its own. In short, pseudo-classes answer 'which element and in what state', while pseudo-elements answer 'which piece of an element or what generated content'.
- Pseudo-classes style interaction states without JavaScript
- Pseudo-elements add decorative content without extra HTML
- Cleaner markup by generating content in CSS
- Precise targeting of element parts like first line or letter
- Enable rich hover, focus, and structural styling
AI Mentor Explanation
A pseudo-class is like a rule that applies to a batter only while they're on a specific score — 'highlight the player when they reach 50'. It targets a real player in a particular state. A pseudo-element is like painting an extra decorative flag beside the scoreboard that no player carries — you conjure a new visual part that was never listed on the team sheet, purely for presentation.
Step-by-Step Explanation
Step 1
Identify the intent
Ask whether you are styling an element in a state (pseudo-class) or a generated/sub-part of an element (pseudo-element).
Step 2
Use single colon for states
Write :hover, :focus, :checked, :nth-child() to target real elements based on condition or position.
Step 3
Use double colon for parts
Write ::before, ::after, ::first-line, ::first-letter, ::selection to style virtual pieces or inject content.
Step 4
Add content for ::before/::after
Generated content pseudo-elements require the content property (even content: '') to render.
Step 5
Combine when needed
Chain them, e.g. a:hover::after, to style a generated part only while the element is in a state.
What Interviewer Expects
- Correct single-colon vs double-colon syntax convention
- Knowing pseudo-classes target state or position of real elements
- Knowing pseudo-elements create virtual, non-DOM parts
- Examples of each (:hover, :nth-child vs ::before, ::first-line)
- Awareness that ::before/::after need the content property
Common Mistakes
- Confusing which uses one colon versus two
- Thinking ::before/::after work without the content property
- Believing pseudo-elements exist in the DOM and are selectable by JavaScript
- Mixing up :first-child (pseudo-class) with ::first-letter (pseudo-element)
- Assuming you can attach multiple ::before to one element
Best Answer (HR Friendly)
“A pseudo-class styles an element when it's in a certain state, like when you hover over a button. A pseudo-element lets you style or add a hidden part of an element, like inserting a decorative icon before some text, without changing the HTML.”
Code Example
/* Pseudo-class: real element in a state */
button:hover {
background: #2563eb;
}
li:nth-child(odd) {
background: #f3f4f6;
}
/* Pseudo-element: virtual part / generated content */
.price::before {
content: '$';
color: green;
}
p::first-line {
font-weight: bold;
}Follow-up Questions
- Why do ::before and ::after require the content property?
- Can JavaScript select or access a pseudo-element in the DOM?
- What is the difference between :first-child and :first-of-type?
- Why does modern CSS use double colons for pseudo-elements?
- How would you style text a user has selected on the page?
MCQ Practice
1. Which of these is a pseudo-element?
::first-letter styles a virtual part of an element and uses double-colon syntax, making it a pseudo-element.
2. What is required for ::before to render generated content?
::before and ::after only render when the content property is set, even if it is an empty string.
3. A pseudo-class primarily targets an element based on what?
Pseudo-classes like :hover, :checked, and :nth-child select real elements based on state or structural position.
Flash Cards
Pseudo-class syntax? — Single colon, e.g. :hover, :focus, :nth-child() — targets real elements by state or position.
Pseudo-element syntax? — Double colon, e.g. ::before, ::first-line — styles a virtual part or injects generated content.
Do pseudo-elements exist in the DOM? — No — they are rendered virtually and cannot be selected by JavaScript DOM queries.
What does ::before need to appear? — The content property must be set, even to an empty string.
:first-child vs ::first-letter? — :first-child is a pseudo-class (state/position); ::first-letter is a pseudo-element (a virtual part).
Continue Learning
Related Interview Questions
What is the difference between the HTML id and class attributes?
easy
How does CSS specificity work and how are conflicting rules resolved?
medium
What is the difference between Flexbox and CSS Grid, and when should you use each?
medium
What is the difference between position relative, absolute, fixed, and sticky in CSS?
medium