Introduction

CSS provides powerful selectors that allow you to style elements based on their state or specific parts.

👉 These are called pseudo-classes and pseudo-elements.

They help you create interactive and visually appealing designs without extra HTML.

What You’ll Learn

What are pseudo-classes
What are pseudo-elements
Difference between them
Common pseudo-classes
Common pseudo-elements
Real-world usage examples
Best practices

What is a Pseudo-class?

Pseudo-classes are used to define a special state of an element.

👉 It starts with a single colon :

Syntax:

selector:pseudo-class {
  property: value;
}

Example:

a:hover {
  color: red;
}

👉 This changes link color when the user hovers over it.

Common Pseudo-classes

1️⃣ :hover

Applies style when mouse hovers over an element.

button:hover {
  background-color: blue;
}

Very common for buttons and links.

2️⃣ :active

Applies style when element is being clicked.

button:active {
  background-color: gray;
}

3️⃣ :focus

Used for input fields when selected.

input:focus {
  border: 2px solid blue;
}

Very important for forms.

4️⃣ :first-child

Targets the first child element.

li:first-child {
  color: red;
}

5️⃣ :last-child

Targets the last child.

li:last-child {
  color: green;
}

6️⃣ :nth-child()

Targets specific child.

li:nth-child(2) {
  color: blue;
}

Even rows example:

tr:nth-child(even) {
  background-color: #f2f2f2;
}

Very common in tables.

What is a Pseudo-element?

A pseudo-element is used to style a specific part of an element.

👉 It starts with double colon ::

Syntax:

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

Notice the double colon (::)

1️⃣ ::before

Adds content before element.

p::before {
  content: "Note: ";
  color: red;
}

2️⃣ ::after

Adds content after element.

p::after {
  content: " ✔";
}

Very common for icons and effects.

3️⃣ ::first-letter

Styles first letter.

p::first-letter {
  font-size: 30px;
  color: red;
}

4️⃣ ::first-line

Styles first line.

p::first-line {
  font-weight: bold;
}

More Useful Pseudo-classes (Important)

Beyond basic pseudo-classes, there are several powerful ones used in real projects.

:not()

Selects elements that do NOT match a condition.

p:not(.special) {
  color: gray;
}

👉 Styles all <p> except those with class special.

:checked

Used with checkboxes and radio buttons.

input:checked {
  accent-color: green;
}

👉 Very useful for custom form styling.

:disabled

button:disabled {
  background-color: gray;
  cursor: not-allowed;
}

👉 Improves UX for disabled elements.

:empty

div:empty {
  display: none;
}

👉 Targets elements with no content.

:nth-child(even/odd)

tr:nth-child(even) {
  background-color: #f2f2f2;
}

👉 Commonly used for tables (zebra striping).

Difference Between Pseudo-class and Pseudo-element

Feature	Pseudo-class	Pseudo-element
Purpose	Element state	Part of element
Syntax	`:`	`::`
Example	`:hover`	`::before`

👉 Easy way to remember:

Pseudo-class → behavior/state
Pseudo-element → part of element

Real World Example

a {
  text-decoration: none;
  color: black;
}

a:hover {
  color: blue;
}

li:nth-child(even) {
  background-color: #f2f2f2;
}

h1::after {
  content: " 🔥";
}

👉 Used in:

Navigation menus
Lists
UI highlights

Zebra striping table:

tr:nth-child(even) {
  background-color: #f2f2f2;
}

More Useful Pseudo-elements

::selection

Styles selected text.

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

👉 Adds a unique user experience.

::placeholder

Used for input placeholders.

input::placeholder {
  color: gray;
}

👉 Helps style form UI.

::marker

Used for list bullets.

li::marker {
  color: red;
}

👉 Modern way to style list bullets.

Combining Pseudo-classes and Pseudo-elements

You can combine them for powerful effects.

p:hover::first-letter {
  color: red;
  font-size: 2rem;
}

👉 When user hovers:

First letter changes style

👉 This creates interactive typography.

Real-World UI Examples (Very Important Section)

Navigation Menu Hover Effect

nav a {
  text-decoration: none;
  padding: 10px;
}

nav a:hover {
  background-color: #eee;
}

👉 Used in almost every website navigation.

Button Click Animation

button:active {
  transform: scale(0.95);
}

👉 Gives a “pressed” effect.

Custom Checkbox Design

input:checked {
  outline: 2px solid green;
}

👉 Used in modern forms.

Modern Usage (Important)

Button Hover Effect

button {
  transition: 0.3s;
}

button:hover {
  background-color: black;
  color: white;
}

Decorative Elements

h2::before {
  content: "";
  display: block;
  width: 50px;
  height: 3px;
  background: black;
}

👉 Used for design elements without extra HTML.

When to Use What (Important Concept)

Use pseudo-classes when:

You want user interaction (hover, click, focus)
You want to target element position (nth-child)

Use pseudo-elements when:

You want to style part of content
You want to add decorative content
You want to avoid extra HTML

Common Mistakes

Confusing : and ::
Forgetting content in pseudo-elements
Overusing pseudo-elements
Not testing hover effects on mobile

Practice Task

Task 1: Hover Effect

Change button color on hover.

Task 2: Form Focus

Style input field on focus.

Task 3: List Styling

Use :nth-child for zebra effect.

Task 4: Add Icons

Use ::before or ::after to add symbols.

Task 5: Text Styling

Style first letter and first line.

Task 6: Mini Project

Create:

Styled button
Styled list
Decorative heading

👉 Use pseudo-classes + pseudo-elements

Important Points to Remember

Pseudo-classes define element states
Pseudo-elements style parts of elements
Use : for pseudo-classes
Use :: for pseudo-elements
Always use content with pseudo-elements

Conclusion

Pseudo-classes and pseudo-elements are powerful tools in CSS that allow you to create interactive and visually appealing designs without adding extra HTML.

👉 Practice different selectors
👉 Use them in real projects
👉 Combine with transitions for better UI