🎭 CSS Pseudo-Classes & Pseudo-Elements

Last Updated: November 2025

Pseudo-classes and pseudo-elements let you style elements based on state (like hover or focus) or specific parts of elements (like first letter or after content).

🗣 Hinglish Tip: Pseudo-classes = kab / kis state me element hai , Pseudo-elements = element ke andar ke part ko style karna

CSS Pseudo-Classes

Pseudo-classes start with a single colon : and describe the state or position of an element.

Syntax

selector:pseudo-class {
  property: value;
}

Common Pseudo-Classes

Pseudo-Class	Description	Example
:hover	When user hovers mouse over the element	button:hover
:focus	When an element (like input) becomes focused	input:focus
:active	When an element is being clicked	a:active
:visited	Applies to links already visited	a:visited
:checked	Selected radio button or checkbox	input:checked
:disabled	Elements disabled by user or code	button:disabled
:first-child	First child of its parent	p:first-child
:last-child	Last child of its parent	li:last-child
:nth-child(n)	Selects the nth element inside a parent	li:nth-child(2)
:not(selector)	Selects elements that do NOT match the selector	div:not(.box)

Hover & Active

button:hover {
  background-color: lightblue;
}
button:active {
  background-color: royalblue;
  color: white;
}

🗣 Hinglish Tip: :hover tab chalega jab mouse le jaoge, :active tab jab click karoge.

Focus & Disabled

input:focus {
  border: 2px solid green;
}
input:disabled {
  background: #eee;
}

nth-child()

li:nth-child(odd) {
  background: #f0f0f0;
}
li:nth-child(even) {
  background: #ddd;
}
li:nth-child(3) {
  color: red;
}

🗣 Hinglish Tip: Odd-even styling table rows me kaafi kaam aata hai.

CSS Pseudo-Elements

Pseudo-elements start with a double colon :: and target specific parts of an element’s content.

Syntax

selector::pseudo-element {
  property: value;
}

Common Pseudo-Elements

Pseudo-Element	Description	Example
`::before`	Inserts content before an element	`h1::before`
`::after`	Inserts content after an element	`h1::after`
`::first-letter`	Styles the first letter of text	`p::first-letter`
`::first-line`	Styles the first line of a paragraph	`p::first-line`
`::selection`	Styles text when selected/highlighted	`::selection`
`::placeholder`	Styles placeholder text inside inputs	`input::placeholder`

::before and ::after

h1::before {
  content: "🌟 ";
}
h1::after {
  content: " 🌟";
}

🗣 Hinglish Tip: ::before aur ::after ke saath content property dena zaroori hai!

::first-letter

p::first-letter {
  font-size: 30px;
  color: crimson;
  font-weight: bold;
}

::selection

::selection {
  background: black;
  color: yellow;
}

🗣 Hinglish Tip: Text select karoge toh styling dikhegi — like highlight effect.

::placeholder

input::placeholder {
  color: gray;
  font-style: italic;
}

← Previous Next →