Pseudo-Classes

1.What is a pseudo-class?
CSS pseudo-classes are special keywords added to selectors that let you style elements based on their state, position, or user interaction, without needing extra classes in your HTML.
`Basic syntax:
selector:pseudo-class {
property: value;
}

Example:

a:hover {
color: red;
}`

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

2.Why use pseudo-classes?
They allow you to:

Style elements dynamically (hover, click, focus)
Target elements based on position (first, last, nth)
Avoid adding extra classes in HTML
Improve UI/UX interactions.

3.🔹 1. :hover (Hover Style)
👉 What it means:

Applies styles when the user moves the mouse over an element.

Example:
button:hover {
background-color: blue;
color: white;
}
Use cases:
Buttons changing color
Highlighting cards or menu items
Showing dropdown menus
Key idea:

It only works when a pointing device (mouse) is used.

4.🔹 2. :active (Active Style)
👉 What it means:

Applies styles when the element is being clicked (pressed).

Example:
button:active {
background-color: red;
}
Behavior:
Works only while clicking
Very short duration
Example
Hover → :hover
Click → :active

5.🔹 3. :link (Unvisited Link)
👉 What it means:

Targets links (<a>) that have not been visited yet.

Example:
a:link {
color: blue;
}

6.🔹 4. :visited (Visited Link)
👉 What it means:

Applies to links the user has already visited.

Example:
a:visited {
color: purple;
}
🔹 Link States Order (VERY IMPORTANT)

Always follow this order:

a:link
a:visited
a:hover
a:active

7.🔹 5. :first-child
👉 What it means:

Selects the first child element of a parent.

Example:
li:first-child {
color: red;
}
HTML:
<ul>
<li>Item 1</li> <!-- selected -->
<li>Item 2</li>
</ul>
Key idea:
Must be the first element inside the parent
Not just the first of its type

8.🔹 6. :last-child
👉 What it means:

Selects the last child of a parent.

Example:
li:last-child {
color: green;
}
HTML:
<ul>
<li>Item 1</li>
<li>Item 2</li> <!-- selected -->
</ul>

9.🔹 7. :nth-child(n)
👉 What it means:

Selects elements based on their position (index).

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

👉 Selects the 2nd child

🔹 Summary Table
Pseudo-class What it does
:hover When mouse is over element
:active When element is being clicked
:link Unvisited link
:visited Visited link
:first-child First child of parent
:last-child Last child of parent
:nth-child(n) Select based on position

10.🔹 1. :checked (Checked Selector)
👉 What it means:

Targets elements that are checked/selected.

Works with:
Checkbox (<input type="checkbox">)
Radio buttons (<input type="radio">)
Example:
<input type="checkbox" id="agree">
<label for="agree">I agree</label>
input:checked {
accent-color: green;
}

11.🔹 2. :disabled (Disabled Selector)
👉 What it means:

Targets elements that are disabled (cannot be used).

Example:
<input type="text" disabled>
input:disabled {
background-color: lightgray;
cursor: not-allowed;
}
Use cases:
Show inactive buttons
Style unavailable inputs

12.🔹 3. :enabled (Enabled Selector)
👉 What it means:

Targets elements that are enabled (usable).

Example:
input:enabled {
border: 2px solid green;
}

13.🔹 4. :required (Required Selector)
👉 What it means:

Targets form fields that have the required attribute.

Example:
<input type="text" required>
input:required {
border: 2px solid red;
}

14.🔹 What is a pseudo-element?

A pseudo-element is a keyword added to a selector using :: (double colon) to style a part of an element.

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

15.🔹 Why use pseudo-elements?

They help you:

Style specific parts (like first letter, first line)
Add content using CSS
Avoid extra HTML elements
Create UI effects (icons, overlays, decorations)
🔹 Common pseudo-elements

1. ::before 👉 What it does:

Inserts content before an element.

Example:
p::before {
content: " ";
}
Output:

This text appears before the paragraph

1. ::after 👉 What it does:

Inserts content after an element.

`Example:
p::after {
content: " ✔";
}
Important:

content property is required for ::before and ::after`

1. ::first-letter 👉 What it does:

Styles the first letter of a block element.

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

1. ::first-line 👉 What it does:

Styles the first line of text.

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

1. ::selection 👉 What it does:

Styles text when the user selects (highlights) it.

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

1. ::placeholder 👉 What it does:

Styles placeholder text inside inputs.

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

1. ::marker 👉 What it does:

Styles list item markers (bullets/numbers).

`Example:
li::marker {
color: red;
font-size: 20px;
}
🔹 Example (Combined)
HTML:

Hello world

CSS:
p::before {
content: " ";
}

p::first-letter {
font-size: 40px;
color: blue;
}

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