What are pseudo-classes?
A pseudo-class is used to define the special state of an element.
💡 Simple idea
It styles an element when something happens to it.
Common pseudo-classes
:hover→ when mouse is over element:focus→ when input is selected:active→ when element is clicked:first-child→ first element in a group
button:hover { background: blue; }
What are pseudo-elements?
A pseudo-element lets you style a specific part of an element.
💡 Simple idea
It lets you style or create part of an element, not the whole thing.
Common pseudo-elements
::before→ content before element::after→ content after element::first-letter→ first letter of text::first-line→ first line of text
p::before { content: "👉 "; }
Key differences
- Pseudo-classes → target states (:hover, :focus)
- Pseudo-elements → target parts (::before, ::after)
- Pseudo-classes → single colon
: - Pseudo-elements → double colon
::
Real-world usage
- Hover effects on buttons
- Form validation states
- Decorative icons using ::before / ::after
- Styling first letters in articles
📌 Important
Pseudo-elements do not exist in HTML — they are created by CSS.
Summary
Pseudo-classes style elements based on state, while pseudo-elements style specific parts of an element.
Together, they help create interactive and visually rich web designs.