CSS Selectors in Hindi – Selectors क्या होते हैं? CSS Selector के प्रकार ?

WhatsApp Group Join Now
Telegram Group Join Now

हेल्लो दोस्तों ! आज हम इस आर्टिकल में CSS Selectors Types के बारें में पढेंगे. इसे बहुत ही आसान भाषा में लिखा गया है. इसे आप पूरा पढ़िए, यह आपको आसानी से समझ में आ जायेगा. तो चलिए शुरू करते हैं:-

CSS Selectors in Hindi – Selectors क्या होते हैं? CSS Selector के प्रकार ?

CSS Selectors kya hai : CSS Selectors एक Web Page के लिए बहुत ही Important होते हैं. CSS Selectors के through हम उस Content को Select करते हैं, जिसके लिए हम CSS लिखना चाहते हैं.CSS Selectors का Use हम उन HTML Elements को “खोजने” (या चुनने) के लिए किया जाता है जिन्हें हम स्टाइल करना चाहते हैं।

CSS Selectors Types

CSS में कुछ important selectors इस प्रकार हैं –

  1. Element / Tag selector
  2. ID selector
  3. Class selector
  4. Universal selector
  5. Group selector
  6. Attribute selector

CSS Element / Tag Selector

इस type के selectors में , हम direct HTML elements के name से ही select करके style apply करते हैं।

CSS Element / Tag Selector Example :-

<!DOCTYPE html>

<html> 

 <head>   

  <meta charset="utf-8">    

  <title>CSS Element / Tag Selector</title>    

<style>     

 /*change page background color:black*/     

  body {background-color: black;}     

 /*all h3 headings color : red*/     

  h2 {color: red;}    

</style>  

 </head>  

 <body>   

    <h2>CSS Element Tag Selector</h2>  

 </body>

</html>

CSS ID Selector

ID Selectors HTML elements में define की गयी ID के bases पर elements को select करते हैं। ID के साथ define किये गए element को select करने के लिए #idname (hash) का use किया जाता है।

इसे पढ़े :-  Types of CSS | सीएसएस के प्रकार | CSS in Hindi

CSS ID Selector Example :-

<!DOCTYPE html>

<html>  

  <head> 

      <meta charset="utf-8">    

      <title>CSS ID Selector</title>    

<style>      

     /*select according to ID*/      

           #myheading{color: red;}    

</style>  

  </head>  

         <body>    

                <h2 id="myheading">CSS ID Selector</h2>  

          </body>

</html>

CSS Class Selector

यह elements में define की गयी class के bases पर elements को select करते हैं। class के साथ define किये गए element को select करने के लिए .class (dot) का use किया जाता है।

CSS Class Selector Example :-

<!DOCTYPE html>

 <html>  

   <head>    

       <meta charset="utf-8">    

       <title>CSS class Selector</title>    

       <style>      

              /*select according to class*/     

                  .myclass{color: red;}    

         </style>  

   </head>  

   <body>    

          <h2 class="myclass">CSS class Selector</h2>  

   </body>

 </html>

CSS Universal selector

Universal selector के through web page में present सभी elements (ID, class , tag) select हो जाते हैं।

CSS Universal Selector Example :-

<!DOCTYPE html>

<html>  

  <head>    

      <meta charset="utf-8">    

      <title>CSS universal Selector</title>    

    <style>      

         /*select all element*/     

              *{color: blue; font-weight: bolder;}    

     </style>  

   </head>  

   <body>    

            <h2>Heading Tag</h2>    

            <p>Paragraph</p>    

            <div>Div</div>    

            <span>span</span>  

    </body>

</html>

 

इसे पढ़े :-  CSS text properties in hindi-css टेक्स्ट प्रॉपर्टीज क्या है? - Hindi tutorial

CSS Group selector

Well , अभी तक हम ID या class selectors के through हम अलग – अलग style apply कर रहे थे। लेकिन जब हमें कई elements पर same style apply करनी होतो हम कई elements को Tag , ID या class का use करके एक साथ भी select कर सकते हैं।

Don’t use it for same style#myID{color: blue; font-weight: bolder;}.myclass{color: blue; font-weight: bolder;}span{color: blue; font-weight: bolder;}

WhatsApp Group Join Now
Telegram Group Join Now

इसकी जगह आपको यह use करना चाहिए।

#myID, .myclass, span{color: blue; font-weight: bolder;}

एक से ज्यादा elements को एक साथ elect करने के लिए selectors को comma ( , ) से separate करके elements को select करते हैं।

CSS Group Selector Example :- 

<!DOCTYPE html>

 <html>  

   <head>    

     <meta charset="utf-8">    

     <title>CSS Group Selector</title>    

  <style>      

       /*select needed elements at once*/      

           #myID, .myclass, span{color: blue; font-weight: bolder;}    

   </style>  

 </head>  

  <body>    

           <h2 id="myID">My Heading</h2>    

           <p class="myclass">My Paragraph</p>    

           <span>Normal Para</span>  

   </body>

</html>

CSS Attribute selector

Style Apply करने के लिए ID , class के अलावा आप attribute के name से भी select कर सकते हैं , उसके लिए आपको उस element के साथ attribute का name (element[attribute]) define करना पड़ता है। HTML elements में ID , class ये attributes ही होते हैं।

इसे पढ़े :-  CSS Overflow Property क्या हैं पूरी जानकारी हिंदी में? - Hindi tutorial

CSS Attribute Selector Example :-

<!DOCTYPE html>

   <html>  

      <head>    

               <meta charset="utf-8">    

               <title>CSS Attribute Selector</title>    

         <style>     

             body {background-color: black;}      

             h2[test='attribute'] {color: red;}    

         </style>  

       </head>  

      <body>    

                 <h2 test='attribute'>Test Attribute</h2>  

      </body>

  </html>

 

Leave a Reply

error: Content is protected !!