Home › coding › html › html css pseudo classes

Html Css Pseudo Classes — Free Html Tutorial

Learn Html Css Pseudo Classes in Html with a free, beginner-friendly tutorial, examples and practice for Indian students on Syllab.in.

✓ 100% Free ✓ No Login Needed ✓ NCERT / CBSE Aligned ✓ Download as PDF

TL;DR: Learn Html Css Pseudo Classes 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 Jul 14, 2026

🤖 Stuck on any question? Ask Syllab's free AI Tutor for a step-by-step explanation — instant, unlimited, no login.

Html Css Pseudo Classes 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.

Html Css Pseudo Classes — 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 Html Css Pseudo Classes 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 →

Explore:

  • Syllabus
  • Practice
  • Mock Tests
  • NCERT Solutions
  • Coding
  • GK Quiz
  • Career Predictor
  • AI Tutor
  • Live Quiz
  • Doubt Solver
  • Microlearning
  • Free Alternatives
  • Kids Zone
  • Study Room
  • Calculators
  • Worksheets

Syllab.in — Free learning for Indian students, Class 1–12