Blog

CSS Selectors Kya Hote Hain – CSS Me Kitne Types Ke Selectors Hote Hain

CSS Selectors Kya Hote Hain :

CSS selectors ek tarika hai jiske through hum kisi specific HTML element ko style de sakte hain. Different types ke selectors hote hain jo humein flexibility dete hain ki hum kaunse elements ko target karna chahte hain. Chaliye inhe detail mein samajhte hain:

1. Universal Selector (*) :

Universal Selector (*) ek CSS selector hai jo kisi bhi HTML document ke sabhi elements par apply hota hai. Matlab, jab hum * selector use karte hain, toh woh page ke har ek element (like <div>, <p>, <h1>, <span>, <a>, etc.) par effect karega.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Yeh code poore HTML page ke sabhi elements ka margin aur padding remove kar dega.

2. Element Selector (h1, p, div, etc.) :

Element Selector ek basic CSS selector hai jo kisi bhi HTML tag par directly apply hota hai. Jab hum ek Element Selector ka use karte hain, toh CSS automatically uss tag ke saare elements ko target karti hai jo HTML page me present hote hain.

p {
  color: blue;
  font-size: 16px;
}

Yeh CSS saare <p> tags ka text color blue kar dega.

3. Class Selector (.class):

Class selector ek CSS selector hai jo HTML ke kisi bhi element ko style dene ke liye use hota hai. Class selector ka use tab hota hai jab hume multiple elements par ek jaisa style apply karna ho.

.text-red {
  color: red;
}

HTML:

<p class="text-red">Yeh red color ka paragraph hai.</p>

4. ID Selector (#id) :

ID Selector ek CSS selector hai jo kisi ek specific HTML element ko style karne ke liye use hota hai. ID selector ka use tab kiya jata hai jab hume ek unique element par styling apply karni ho. Har HTML document me ek ID sirf ek hi baar use kiya jata hai, yani ID unique hoti hai.

#main-heading {
  font-size: 24px;
  color: green;
}

HTML:

<h1 id="main-heading">Yeh ek green color ka heading hai</h1>

5. Group Selector (h1, p, div):

Agar ek hi CSS rule multiple elements par apply karna ho, toh hum comma (,) use karke unhe group kar sakte hain.

h1, p, div {
  font-family: Arial, sans-serif;
}

Isme h1, p, aur div sabhi par ek hi font-family apply hoga, bina baar-baar likhne ke.

6. Attribute Selector ([type=”text”]):

Yeh selector kisi bhi HTML element ke attributes ko target karne ke liye use hota hai, jaise type, href, alt, target, etc.
Usage: Specific attributes wale elements ko style dene ke liye iska use hota hai.

input[type="text"] {
  border: 2px solid blue;
}

HTML:

<input type="text" placeholder="Enter your name">
<input type="password" placeholder="Enter your password">

Sirf type=”text” wale input fields ka border blue color ka ho jayega, password field par ye apply nahi hoga.

7. Pseudo-classes (:hover, :focus, :nth-child(n)):

Pseudo-classes kisi element ke specific state ko target karti hain, jaise hover hone par ya focus hone par.

Usage: Interactive effects ke liye kaafi useful hoti hain.

1. :hover (Mouse hover hone par style change):

button:hover {
  background-color: red;
}

Jaise hi user button par cursor le jayega, uska background red ho jayega.

2. focus (Jab element par focus ho, jaise input field click hone par)

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

Jab user input field me click karega ya type karega, tab border green ho jayega.

8. Pseudo-elements (::before, ::after):

Pseudo-elements kisi element ke andar extra content add karne ke liye use hote hain bina HTML change kiye.
Usage: Decorative elements ya icons ke liye useful hote hain.

1.::before (Element ke start me content add kare)

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

Sabhi paragraphs ke start me ek star emoji 🌟 add ho jayega.

2. ::after (Element ke end me content add kare) :

CSS File : 

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

Sabhi paragraphs ke end me ek checkmark emoji ✅ add ho jayega.

9. Combinators:

Combinators ka use ek element ka doosre element ke sath relationship define karne ke liye hota hai.

  •  Descendant Selector (space) →Descendant Selector ek CSS selector hai jo ek element ke andar kisi bhi level par maujood doosre element ko target karta hai. Yeh parent-child relationship ko define karta hai, jisme parent aur child ke beech ek space (” “) diya jata hai. 
    div p {
  color: blue;
}

div ke andar jitne bhi p elements honge, sabka color blue ho jayega.

  •  Child Selector (>) → Child Selector (>) ek CSS selector hai jo sirf direct child elements ko target karta hai. Yeh un elements par apply hota hai jo kisi specific parent element ke direct child hote hain, na ki unke nested (indirect) descendants par. 
    div > p {
  font-weight: bold;
}

Sirf div ke direct child p elements bold ho jayenge.

  • Adjacent Sibling Selector (+) → CSS mein Adjacent Sibling Selector (+) ka use do elements ke beech styling apply karne ke liye hota hai, jab ek element dusre ke turant baad aata hai (immediate next sibling). 
    h1 + p {
  color: red;
}

Sirf h1 ke just baad aane wale p element ka color red hoga.

  • General Sibling Selector (~) → CSS General Sibling Selector (~) ek aisa selector hai jo same parent ke andar ek element ke baad aane wale sabhi matching sibling elements ko select karta hai. Iska use styling apply karne ke liye kiya jata hai jab ek element ke baad wale elements ek specific type ke ho. 
    h1 ~ p {
  color: green;
}

h1 ke baad aane wale sabhi p elements green ho jayenge.

Yeh CSS selectors aapko HTML elements ko efficiently style karne me madad karte hain. Har selector ka alag use case hota hai jo aapki styling ko aur flexible banata hai.

Quiz: Test Your Knowledge on CSS Selectors

Bonus: Practical Application!

Aaj hi apne webpage par CSS selectors ka istemal karke dekhein!

CSS selectors ko sahi tareeke se samajhne ke liye different types jaise class, id, attribute, pseudo-class, aur pseudo-element selectors ka upayog karein aur apne webpage ke styling ko aur bhi effective banayein.

Leave a Reply