Selectors in CSS

CSS Selector Kya Hota Hai?

CSS selector ek pattern hota hai jo HTML document me elements ko target karta hai. Ye batata hai ki kaunse element pe kaunsa style apply hoga.

Example:

h1 {
  color: red;
}

Yahaan h1 ek selector hai jo HTML ke sabhi <h1> elements ko red color karega.

Types of CSS Selectors

1. Universal Selector (*)

Universal Selector * se denote hota hai. Ye selector HTML ke sabhi elements ko target karta hai jo webpage par appear hote hai. Jab ham koi style * se apply karte hai to ye universally all elements par apply ho jaata hai.

Example:

* {
  margin: 0;
  padding: 0;
}

• Use: Mostly ye default CSS ko reset karne ke liye use hota hai.

2. Type Selector (Element Selector)

Ye CSS Selector ka ek fundamental selector hai jiska use HTML mein elements ko target karke style apply karne ke liye use hota hai. Y direct HTML element ko select karta hai based on tag name. For example: Agar mein p element par style define karo to webpage par sabhi <p></p> tags mein wo style reflect hoga.

Example:

p {
  font-size: 18px;
}

• Use: Ye tab use hota hai jab hame kisi specific element type ko styling deni ho.

3. Class Selector (.classname)

Class selector HTML ko target karta hai based on their class attribute. Ye applications mein multiple elements ko same style apply karne ke liye allow karta hai.

Example:

.red-text {
  color: red;
}
<p class="red-text">This text is red</p>

• Use: Reusable styling banane ke liye.

4. ID Selector (#idname)

ID selector ka use HTML mein element ki unique ID ko target karne ke liye use hota hai. HTML mein har element ke pass unique ID honi chahiye.

Example:

#main-heading {
  text-align: center;
}

<h1 id="main-heading">Welcome</h1>

• Note: ID unique honi chahiye ek page me.

5. Grouping Selector

Jab hame ek saath multiple selectors pe same style apply karna hota hai, tab ham grouping selector ka use karta hai.

Example:

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

• Use: Ye mainly code duplication ko reduce karta hai, jisse code neat and clean hota hai.

6. Descendant Selector

Ek element ke andar dusre element ko target karta hai.

Example:

div p {
  color: blue;
}

• Meaning: Sirf div ke andar ke p tags ko hi style karega.

7. Child Selector (>)

Sirf direct child elements ko target karta hai.

Example:

ul > li {
  list-style: none;
}

• Difference: div p sab descendants ko target karta hai, div > p sirf immediate children ko.

8. Adjacent Sibling Selector (+)

Ek element ke baad immediate aane wale sibling element ko target karta hai.

Example:

h1 + p {
  color: gray;
}

9. General Sibling Selector (~)

Ek element ke baad aane wale sab sibling elements ko target karta hai.

Example:

h1 ~ p {
  font-style: italic;
}

10. Attribute Selectors

(a) Exact Match [attribute="value"]

Example:

input[type="text"] {
  border: 1px solid black;
}

(b) Contains Word [attribute~="value"]

Example:

[title~="flower"] {
  color: pink;
}

(c) Starts With [attribute^="value"]

Example:

a[href^="https"] {
  color: green;
}

(d) Ends With [attribute$="value"]

Example:

a[href$=".pdf"] {
  color: red;
}

(e) Contains Substring [attribute*="value"]

Example:

div[class*="box"] {
  background: yellow;
}

11. Pseudo-classes

Special states ya conditions ke liye selectors.

Example:

a:hover {
  color: orange;
}

Common pseudo-classes:

• :hover – Mouse hover pe style
• :first-child – Pehla child element
• :last-child – Aakhri child element
• :nth-child(n) – Specific position wala child

12. Pseudo-elements

Element ke specific part ko target karte hain.

Example:

p::first-line {
  font-weight: bold;
}
p::before {
  content: "👉 ";
}

• ::before – Element ke content se pehle content add karega.
• ::after – Element ke content ke baad content add karega.

Conclusion

CSS selectors HTML elements ko style dene ka base hai. Agar aap selectors achhi tarah samajh lete ho, toh aap targeted aur efficient styling likh paoge. Ye web designing ka ek must-learn concept hai jo aapke layouts ko power deta hai.