Pseudo-classes in CSS

Pseudo-classes in CSS ek keyword hota hai jo selector ke saath add hota hai, jisse element ke special state ke liye styling define ki jaati hai.

Pseudo-classes in CSS ke common uses:

• Jab user mouse kisi element par le jaye
• Visited aur unvisited links ko alag style karna
• Jab element focus me aaye
• Form elements (valid/invalid/required/optional) ko style karna
• Parent ka first child element select karna

---

Syntax

CSS Pseudo-classes hamesha ek single colon : ke saath likhe jaate hain:

---

Interactive Pseudo-classes

Pseudo-classes in CSS me interactive pseudo-classes user interaction ke basis par apply hote hain:

• :hover → jab mouse element ke upar ho
• :focus → jab element focus me ho
• :active → jab element click ho raha ho
• :link → unvisited links
• :visited → visited links

---

Pseudo-classes Used on Links

HTML links ke liye commonly ye Pseudo-classes in CSS use hote hain:

• :link → unvisited link
• :visited → visited link
• :hover → mouse over
• :active → clicked link

Example:

Note:

• a:hover ko a:link aur a:visited ke baad likhna zaroori hai
• a:active ko a:hover ke baad likhna zaroori hai
• Pseudo-classes in CSS case-sensitive nahi hote

---

:hover on <div>

Example:

---

:focus on <input>

Example:

---

Pseudo-classes and HTML Classes

CSS Pseudo-classes ko HTML classes ke saath combine bhi kar sakte hain:

Example:

---

Simple Tooltip Hover

Hover karne par <p> element show karne ke liye:

Example:

---

Structural Pseudo-classes

Pseudo-classes in CSS me structural pseudo-classes document structure ke basis par elements ko select karte hain:

• :first-child → parent ka first child
• :last-child → parent ka last child
• :nth-child(n) → nth child
• :lang() → specific language wale elements

---

:first-child Examples

First child <p> select karna:

Har <p> me first <em> select karna:

First <p> ke andar sab <em> select karna:

---

:lang() Pseudo-class

CSS Pseudo-classes me :lang() ka use specific language wale elements select karne ke liye hota hai.

Example:

---

Other Structural Pseudo-classes

Aur bhi important Pseudo-classes in CSS:

• :last-child → last child select karta hai
• :nth-child(n) → nth child select karta hai
• :nth-last-child(n) → end se nth child
• :only-child → jo ek hi child ho
• :first-of-type → apne type ka first element
• :last-of-type → apne type ka last element

---

Pseudo-classes in CSS element ke different states aur structure ke basis par styling control karne ka powerful tarika dete hain, jisse UI ko interactive aur dynamic banaya ja sakta hai.