Simple Selectors in CSS in Hindi-Simple Selector Types Hindi

Element Selector से direct html element या tag का उपयोग करके उसमे css लगाया जाता है | जैसे div, h1, p आदि tag को लेकर उन्हें एक जैसी style दे सकतें हैं |

उदाहरण:

<!Doctype html>
<html>
 <head>
  <style>
    p{
      font-family:arial;
      color:red;
	 }
   h1{
      color:green;
    }
  </style>
 </head>
 <body>
  <h1 id="hp">My CSS Class</h1>
  <p id="p1">css learning</p>
  <div id="div1">
    <h1>HTML Tutorial</h1>
    <p>Html code is very easy</p>
  </div>	
 </body>
</html>

output:

उदाहरण में देखिये html webpage के सारे paragraph और <h1> tags को element selector के जरिये एक जैसी style दी गयी है |

Id Selector in CSS

Id Selector html element को उसके id के जरिये select करता है | id का मतलब unique identifier होता है, जो हर element के लिए अलग होता है | जिसके जरिये एक particular element को पहचानना आसान होता है |

Id selector की सुरुआत “#” (हाश) सिंबल से की जाती है |

syntax: #tagid{property: value;}

उदाहरण:

<html>
   <head>
      <title>CSS Selectors Tutorial</title>
      <style>
         #hp{
         color:green;
         }
         #p1{
         color:red;
         text-align:center; 
         } 
      </style>
   </head>
   <body>
      <h1 id="hp">My CSS Class</h1>
      <p id="p1">css learning</p>
      <h1>HTML Tutorial</h1>
      <p>Html code is very easy</p>
   </body>
</html>

output:

Class Selector

कई सारे elements को एक जैसा style देने के लिए class selector का इस्तेमाल होता है | कुछ element ग्रुप को एक जैसा style देने में class selector काम आता है |

Class Selector की सुरुआत “.”(डॉट) चिन्ह से होती है | और उसके साथ एक classname लिखी जाती है |

syntax: .className{ property : value;}

नॉटपॉइंट: classname की सुरुआत किसी नंबर से नहीं की जा सकती |

उदाहरण:
.classclr
{
color:blue;
}

class selector(class का नाम) का उपयोग करने के लिए, जिन element को style देना है उसके class attribute में class name दी जाती है |

उदाहरण:

<h1 class="classclr">My CSS Class</h1>
<p class="classclr">Html code is very easy</p>

अब एक sample code के जरिये class selector को समझतें हैं |

<!Doctype html>
<html>
 <head>
  <style>
    .classclr
    {
     color:blue;
    }
  </style>
 </head>
 <body>
  <h1 id="hp" class="classclr">My CSS Class</h1>
  <p id="p1">css learning</p>
  <div id="div1">
    <h1>HTML Tutorial</h1>
    <p class="classclr">Html code is very easy</p>
  </div>	
 </body>
</html>

उदाहरण में देखिये .classclr नाम का एक class लिया गया है | और <p> tag और <h1> tag में इस class को लगाया गया है, उसका font colour blue हो गया है |

output:

Id Selector Vs Class Selector (id और class selector में फर्क क्या है)

id selector सिर्फ हम किसी निश्चित id के लिए इस्तेमाल कर सकतें हैं | पर class selector का इस्तेमाल किसी भी html element के लिए किआ जा सकता है और अलग अलग element के लिए एक class selector का इस्तेमाल हो सकता है |

Universal Selector

ये एक global selector है | किसी webpage में सारे html elements के लिए कुछ style एक जैसी देनी हो तो universal selector का इस्तेमाल होता है | इस selector को *(Asterik) चिन्ह से सुरु किआ जाता है |

syntax: * { property : value;}

उदाहरण : *{ padding:0; border:0;}

Grouping Selector

कई सारे html elements को एक जैसी स्टाइल देनी हो तो grouping selector का इस्तेमाल होता है | और जिन tags को style करना है उन सब को एक line में ,(comma) से अलग करके लिखा जाता है | उसके बाद css रूल्स लिखी जाती है | तो वो सारे style एक साथ उन सारे tags पे लागु हो जायेंगें |

उदाहरण : h1,h2,p{color:red; font-family:Arial; border:2px;}

ऊपर दिए गए उदाहरण में अपने देखा h1, h2 और <p> tag के लिए एक साथ CSS Style करी गयी है |

इस आर्टिकल में हमने simple selector और उसके type को उदाहरण के साथ समझा | css के अन्य selectors को निचे दिए गए links में बताये गए हैं | links में click करके आगे के selectors पढ़ें और समझे |

CSS Simple Selectors in Hindi – CSS Id, Class, Element Selectors