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:hoverkoa:linkaura:visitedke baad likhna zaroori haia:activekoa:hoverke 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.
