What is CSS Selector in Hindi – Selectors क्या है इसके प्रकार

by
Table of Contents hide
1 CSS Selectors in Hindi
2 Types of CSS Selectors in Hindi
2.1 1) Simple Selectors
2.2 2) Combinator Selectors
2.3 3) Attribute Selectors
2.4 4) Pseudo Element Selectors
2.5 5) Pseudo Class Selectors
3 अन्य CSS Tutorial के सुझाव

CSS Selectors in Hindi

वेबपेज में किसी element को चुन कर उसे स्टाइल देने के लिए CSS Selectors का इस्तेमाल होता है | जैसे एक वेबपेज में paragraph, heading, input element ऐसे कई तरह के element होतें हैं |

program में जरुरत के हिसाब से element को चुनना और उसर style देने के लिए selectors का उपयोग होता है |

चलिए एक उदाहरण देखतें हैं, जहाँ सारे paragraph elements को एक साथ style करेंगे और दुसरी तरफ div को उसके id के जरिये style करेंगे |

CSS Selector Example:

<!Doctype html>
<html>
   <head>
      <title>CSS Selectors Tutorial</title>
      <style>
       p{
          color:red;
        }
       #div1{
           border:2px;
           background-color:cyan;
         }
      </style>
   </head>
   <body>
      <h1>My CSS Class</h1>
      <div id="div1">
         <p>css learning</p>
      </div>
      <p>css selector</p>
      <p>type of css selectors</p>
   </body>
</html>

output:

CSS Selector

इमेज में आप देख रहे होगें सारे पैराग्राफ के लिए एक तरह का style इस्तेमाल हुआ है मतलब फॉन्ट कलर लाल दीया गया है | ऐसे ही जरुरत के हिसाब से कई तरीके से css का इस्तेमाल किया जा सकता है |

css में कई तरह के selectors को दर्शाया गया है | तो चलिए css selectors कितने तरह के होतें हैं वो जानतें हैं?

Types of CSS Selectors in Hindi

CSS Selectors 5 तरह के होतें हैं और वो हैं :

1) Simple Selectors
2) Combinators Selectors
3) Attribute Selectors
4) Pseudo-Class Selectors
5) Pseudo-Element Selectors

1) Simple Selectors

Simple Selectors वो selectors हैं जो html element को उसके id, class, name के जरिये select करता है और उसे फिर style देता है | 5 तरह के Simple Selectors होतें हैं : वो है

  1. element selector (element name या tag name से element select करता है)
  2. id selector (element को उसके id से select करता है)
  3. class selector (css class से element को select करता है)
  4. universal selector(*)
  5. grouping selector

2) Combinator Selectors

Simple Selectors के जरिये हम element को target तो कर सकतें हैं, पर कुछ खाश element ऐसे होतें हैं जिन्हें ऐसे direct target करना मुस्किल होता है | जैसे की कुछ elements अन्य element के अंदर होतें हैं | जिन्हें class या id से select करना कठिन हो सकता है |

ऐसे में काम आता है combinator selectors का | जैसे की नाम से पता चल रहा है combinator selector दो selectors के बिच में relation बनाता है | combinator selector को एक simbol के जरिये दो selectors के बिच में लिखी जाती है |

combinators selectors 4 तरह के होतें हैं और उन्हें उनके symbol से दर्शाया जाता है |
1) descendant selector(space)
2) child selector(>)
3) adjacent sibling selector(+)
4) general sibling selector(~)

3) Attribute Selectors

Attribute Selectors में किसी element को किसी खास attribute के जरिये या फिर attribute value के जरिये select किया जाता है |

उदाहरण:

<!Doctype html>
<html>
 <head>
  <style>
     a[target]{border:2px solid red;}
  </style>
 </head>
 <body>
  <a href="abc.com">abc.com</a>
  <a href="xyz.com" target="_blank">xyz.com</a>
 </body>
</html>

उदाहरण में दो anchor tag ली गयी है और anchor tag को target attribute से select करके उसे border style दी गयी है |

output:

attribute selector example

4) Pseudo Element Selectors

Pseudo Element Selector का इस्तेमाल element की एक विशिष्ट भाग को style करने के लिए किया जाता है | जैसे किसी element के content का पेहला शब्द या पेहली line को style करना | या किसी content के बाद या पेहले content डालना ये सब special cases के लिए Pseudo Element Selectors का उपयोग होता है |

pseudo element को : : चिह्न के साथ लिखा जाता है |

Syntax: selector: :pseudo-element { property: value; }

उदाहरण:

<html>
 <head>
   <title>pseudo-element tutorial</title>
    <style>
      h2::first-letter
             {
	       color:Blue;
	       font-size : 30px;
	       background:yellow;
	     }
    </style>	
  </head>
 <body>
   <div> 
      <h2>Pseudo Element Example</h2> 
   </div>
 </body>
</html>

output:

CSS PseudoElement Selector

CSS में 6 तरह के Pseudo Element Selectors को दर्शाया गया है और वो हैं:

  1. : :first-letter
  2. : :first-line
  3. : :selection
  4. : :placeholder
  5. : : after
  6. : :brfore

5) Pseudo Class Selectors

CSS Pseudo-Class selector दो तरह से काम करती है | पेहली html element की hidden address को ढूंड कर उसपे css लगाती है | दूसरी html element के किसी खास state पे उसे style देती है |

html element की खास state, उदाहरण के लिए input element की clicked या unclicked stage, anchor tag की hover या visited state को चेक करके उसमे style लगाना | वैसे ही किसी element की child tag को track करके उसे style लगाना ये सब काम Pseudo Class Selectors के जरिये की जा सकती है |

उदाहरण:

<html>
 <head>
   <title>pseudo-classes tutorial</title>
   <style>
    p:first-child{color:green;}
   </style>
 </head>
 <body>
   <div>        
    <p>first paragraph</p>
    <p>second paragraph</p>
   </div>	
 </body>
</html>

उदाहरण में हमने Pseudo Class Selector के जरिये div tag के अंदर की पेहली पैराग्राफ को select किया है और उसे style दीया है |

output:

PseudoClass Selector Example

इस आर्टिकल में आपने selectors क्या है और कितने प्रकार के होतें वो सिखा | css selectors के type को बिस्तार से जानने के लिए निचे दिए गए links पे click करें जहाँ हमने selectors के सारे प्रकार को अच्छे से उदाहरण से बतायें हैं |

अन्य CSS Tutorial के सुझाव