CSS (Cascading style sheets) selectors in Hindi

Siddharth Sharma
Mar 1, 2025
2 min read

CSS (Cascading Style Sheets) selectors are patterns used to select and style HTML elements on a web page. They allow you to target specific elements or groups of elements to apply styles. Below are some common types of CSS selectors with examples:

1. Element Selector

यह किसी विशेष प्रकार के सभी HTML elements को select करता है।
उदाहरण:
css

p {   color: blue; }

यह सभी <p> elements का text color नीला (blue) कर देगा।

2. Class Selector

यह उन elements को select करता है जिनमें एक विशेष class attribute होता है।
उदाहरण:
css

.highlight {   background-color: yellow; }

यह उन सभी elements का background पीला (yellow) कर देगा जिनमें class="highlight"
होगा।

3. ID Selector

यह एक विशेष ID attribute वाले element को select करता है।
उदाहरण:
css

#header {   font-size: 24px; }

यह उस element का font size 24px कर देगा जिसमें id="header" होगा।

4. Universal Selector

यह पेज के सभी elements को select करता है।
उदाहरण:
css

* {   margin: 0;   padding: 0; }

यह सभी elements के default margin और padding को हटा देगा।

5. Attribute Selector

यह elements को उनके attributes या attribute values के आधार पर select करता है।
उदाहरण:
css

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

यह सभी <input> elements जिनमें type="text" होगा, उनकी border को grey कर देगा।

6. Descendant Selector

यह उन elements को select करता है जो किसी अन्य element के अंदर (descendant) होते हैं।
उदाहरण:
css

div p {   color: green; }

यह सभी <p> elements का text color हरा (green) कर देगा जो <div> के अंदर होंगे।

7. Child Selector

यह किसी parent element के direct child elements को select करता है।
उदाहरण:
css

ul > li {   list-style-type: square; }

यह सभी <li> elements जो <ul> के direct children होंगे, उनकी list style को square कर देगा।

8. Adjacent Sibling Selector

यह उस element को select करता है जो किसी specific sibling element के तुरंत बाद आता है।
उदाहरण:
css

h1 + p {   font-weight: bold; }

यह उस <p> element को bold कर देगा जो <h1> के तुरंत बाद आता है।

9. General Sibling Selector

यह किसी specific element के सभी siblings को select करता है।
उदाहरण:
css

h2 ~ p {   color: purple; }

यह सभी <p> elements का text color बैंगनी (purple) कर देगा जो <h2> के siblings होंगे।

10. Pseudo-class Selector

यह elements को उनकी state या position के आधार पर select करता है।
उदाहरण:
css

a:hover {   color: red; }

यह links का color लाल (red) कर देगा जब उन पर mouse hover किया जाएगा।

11. Pseudo-element Selector

यह किसी element के specific part को select करता है।
उदाहरण:
css

p::first-line {   font-weight: bold; }

यह हर <p> element की पहली लाइन को bold कर देगा।

Example Combining Selectors:

css

/* यह <div> के अंदर वाले सभी <p> elements को select करेगा जिनमें class="intro" होगा */
div p.intro {
  font-size: 18px;
  color: #333;
}

CSS selectors बहुत ही शक्तिशाली हैं और आपको precise और efficient styles बनाने में मदद करते हैं। इन्हें combine करके आप किसी भी element या element group को target कर सकते हैं।