A pseudo-class in CSS is used to define a special state of an element. They allow you to style elements based on their state, position, or interaction without adding extra classes or JavaScript.

---

🔹 1. Hover, Focus, and Active States

These pseudo-classes style elements when users interact with them.

✅ :hover (Mouse Hover)

Changes the style when the user hovers over an element.

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

🔹 Applies when the mouse is over the <button>.
🔹 Useful for buttons, links, menus, etc.

---

✅ :focus (Focused Element)

Styles an element when it is focused (clicked or selected).

input:focus {
    border: 2px solid green;
    outline: none;
}

🔹 Applies when an input field is clicked or tabbed into.
🔹 Removes the default outline and adds a custom green border.

---

✅ :active (Clicked Element)

Styles an element when it is being clicked.

button:active {
    background-color: red;
    transform: scale(0.95);
}

🔹 Applies when the button is being pressed.
🔹 Useful for giving a click effect.

---

🔹 2. Styling Links (:link, :visited, :hover, :active)

Used to control the different states of links.

a:link {
    color: blue; /* Default link color */
}

a:visited {
    color: purple; /* After the link is clicked */
}

a:hover {
    color: green; /* When mouse hovers over the link */
}

a:active {
    color: red; /* While clicking */
}

🔹 :link → Normal links (before visiting).
🔹 :visited → After the user clicks the link.
🔹 :hover → When the user hovers.
🔹 :active → When the link is being clicked.

---

🔹 3. First and Last Child (:first-child, :last-child)

These pseudo-classes select the first or last child of a parent.

✅ :first-child (Selects the First Child)

p:first-child {
    color: red;
}

🔹 Only the first <p> inside a parent will be red.

---

✅ :last-child (Selects the Last Child)

p:last-child {
    color: blue;
}

🔹 Only the last <p> inside a parent will be blue.

---

🔹 4. nth-child (:nth-child(n))

Allows selection of specific children of an element.

✅ Example: Every 2nd <li> will be red

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

✅ Example: Every odd row is gray

tr:nth-child(odd) {
    background-color: lightgray;
}

✅ Example: Every even row is blue

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

---

🔹 5. nth-of-type (:nth-of-type(n))

Similar to nth-child, but selects elements of a specific type.

✅ Example: Selects the 2nd <p> inside a div

div p:nth-of-type(2) {
    color: green;
}

---

🔹 6. First and Last of Type (:first-of-type, :last-of-type)

Selects the first or last occurrence of a specific type inside a parent.

p:first-of-type {
    font-weight: bold;
}

p:last-of-type {
    font-style: italic;
}

🔹 First <p> inside a parent → Bold
🔹 Last <p> inside a parent → Italic

---

🔹 7. Empty (:empty)

Selects elements with no content inside.

div:empty {
    border: 2px dashed red;
}

🔹 Useful for highlighting empty containers.

---

🔹 8. Not (:not(selector))

Excludes elements that match a selector.

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

🔹 All <p> elements will be gray, except the ones with class .special.

---

🔹 9. Checked (:checked)

Used for radio buttons and checkboxes.

input:checked {
    accent-color: red;
}

🔹 Changes color of selected checkboxes or radio buttons.

---

🔹 10. Disabled and Enabled (:disabled, :enabled)

Used for form elements.

input:disabled {
    background-color: lightgray;
}

input:enabled {
    background-color: white;
}

🔹 Disabled fields become gray.
🔹 Enabled fields remain white.

---

📌 Summary Table of CSS Pseudo-Classes

Pseudo-Class	Description
:hover	When the mouse hovers over an element
:focus	When an element is selected (input, textarea, etc.)
:active	When an element is being clicked
:link	Styles normal (unvisited) links
:visited	Styles visited links
:first-child	Selects the first child of a parent
:last-child	Selects the last child of a parent
:nth-child(n)	Selects the nth child of a parent
:nth-of-type(n)	Selects the nth element of a specific type
:first-of-type	Selects the first element of a type inside a parent
:last-of-type	Selects the last element of a type inside a parent
:empty	Selects elements with no content
:not(selector)	Excludes elements matching the selector
:checked	Selects checkboxes and radio buttons that are checked
:disabled	Selects form elements that are disabled
:enabled	Selects form elements that are enabled

---

📌 Conclusion

CSS pseudo-classes make styling dynamic elements easy.
They are especially useful for hover effects, forms, lists, and UI interactions.