CSS Selectors

CSS Selector वह pattern होता है जिसकी मदद से CSS यह तय करती है कि किस HTML element पर style apply करनी है।

Selector HTML elements को select करता है और फिर उनके ऊपर CSS rules apply होते हैं।

Basic CSS Selectors

1. Element Selector

Element Selector सीधे HTML tag को select करता है।

p {
  color: red;
}

यह सभी <p> elements पर apply होगा।

2. Class Selector

Class Selector उन elements को select करता है जिनकी class same होती है।
Class selector के पहले dot (.) लगाया जाता है।

HTML

<p class="text">Hello</p>
<p class="text">World</p>

CSS

.text {
  color: blue;
}

3. ID Selector

ID Selector किसी एक unique element को select करता है।
ID selector के पहले hash (#) लगाया जाता है।

HTML

<h1 id="title">CSS Selectors</h1>

CSS

#title {
  color: green;
}

Class vs ID

• Class multiple elements पर use हो सकती है
• ID एक page में सिर्फ एक element के लिए होती है

Universal Selector

Universal Selector सभी elements को select करता है।
इसका symbol * होता है।

* {
  margin: 0;
  padding: 0;
}

Grouping Selector

Multiple selectors को एक साथ style करने के लिए comma (,) का use किया जाता है।

h1, h2, p {
  color: purple;
}

Descendant Selector

Descendant Selector किसी element के अंदर मौजूद elements को select करता है।

div p {
  color: red;
}

यह सिर्फ वही <p> select करेगा जो <div> के अंदर हैं।

Child Selector

Child Selector direct child elements को select करता है।
इसमें > symbol use होता है।

div > p {
  color: blue;
}

Attribute Selector

Attribute Selector attribute के आधार पर element select करता है।

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

Pseudo-class Selector

Pseudo-class element की special state को target करता है।

a:hover {
  color: red;
}

Pseudo-element Selector

Pseudo-element element के specific part को select करता है।

p::first-letter {
  font-size: 30px;
}

Selector Priority (Basic Idea)

Priority order:

1. Inline CSS
2. ID selector
3. Class selector
4. Element selector

Selector Example with HTML

HTML

<div class="box">
  <p>Hello CSS</p>
</div>

CSS

.box p {
  color: blue;
}

Common Selector Mistakes

Class selector में dot भूल जाना

text {
  color: red;
}

सही:

.text {
  color: red;
}

ID selector में # भूल जाना

title {
  color: blue;
}

सही:

#title {
  color: blue;
}

Summary

• Selector decide करता है किस element पर CSS लगेगी
• Element, Class, ID सबसे basic selectors हैं
• Universal selector सभी elements को select करता है
• Descendant और Child selector relationship पर काम करते हैं
• Pseudo-class और Pseudo-element advanced selectors हैं