CSS Pseudo-classes & Pseudo-elements — Free HTML Tutorial
Learn CSS Pseudo-classes & Pseudo-elements in HTML with a free, beginner-friendly tutorial, examples and practice for Indian students on Syllab.in.
TL;DR: Learn CSS Pseudo-classes & Pseudo-elements in HTML with a free, beginner-friendly tutorial, examples and practice for Indian students on Syllab.in.
Written & reviewed by the Syllab.in Academic Team (CBSE/NCERT subject experts) · Updated
CSS Pseudo-classes & Pseudo-elements in HTML
Pseudo-classes: :hover, :active, :focus, :visited, :nth-child, :first-child, :last-child, :empty.
Pseudo-elements: ::before, ::after, ::first-letter, ::selection, ::placeholder.
Pseudo-elements add virtual elements. Useful for decorations without extra HTML.
CSS Pseudo-classes & Pseudo-elements — Syntax
a:visited { color: purple; }
li:nth-child(2n) { background: gray; }
p::first-letter { font-size: 2em; font-weight: bold; }
input::placeholder { color: #ccc; }
Learn CSS Pseudo-classes & Pseudo-elements step by step with Syllab's free interactive HTML tutorial — runnable code examples, practice exercises and instant AI feedback, all free with no signup. Explore the full HTML course →