CSS Selectors In Hindi (CSS selectors क्या है? एवं इसके प्रकार)- in details

CSS selector का use HTML के जिस element को design देना चाहते उसको find या select करने के लिए किया जाता है।

Table of Contents

CSS Selectors In Hindi

<!DOCTYPE html>
<html>
<head>
<style>
p {
  text-align: center;
  color: red;
} 
</style>
</head>
<body>
<p>Welcome to Technalay </p>
</body>
</html>

Types of CSS Selector in Hindi

CSS selector को हम 6 category में devide कर सकते है :

Element / Tag selector
ID selector
Class selector
Universal selector
Group selector
Attribute selector

Simple selectors (Element selector)

इस selector में direct HTML element को target करके उसमे CSS apply करते है।

<!DOCTYPE html>
<html>
<head>
<style>
p {	
  text-align: center;
  color: red;
} 
</style>
</head>
<body>
<p>Welcome to Technalay </p>
</body>
</html>

ID selector

इस selector में किसी element को select करने के लिए सबसे पहले उस element का ID बनाया जाता है जो Hash(#) के साथ लिखा जाता है जैसे कि #myid, अब इस ID को style section या CSS page में target करके CSS mathod apply किया जाता है।

<!DOCTYPE html>
<html>
<head>
<style>
#myid{	
  text-align: center;
  color: red;
} 
</style>
</head>
<body>
<p id="myid">Welcome to Technalay </p>
</body>
</html>

Class selector

इस selector में किसी element को select करने के लिए सबसे पहले उस element का class बनाया जाता है जो डॉट(.) के साथ लिखा जाता है जैसे कि .myid, अब इस class को style section या CSS page में target करके CSS mathod apply किया जाता है।

<!DOCTYPE html>
<html>
<head>
<style>
.myclass{	
  text-align: center;
  color: red;
} 
</style>
</head>
<body>
<p class="myclass">Welcome to Technalay </p>
</body>
</html>

Universal selector

Universal selector के use करके आप webpage के सारे elements को target करके CSS methods apply कर सकते है। चाहे वो किसी भी selector (ID, class) के अंदर हो।

<!DOCTYPE html>
<html>
<head>
<style>
*{	
  text-align: center;
  color: red;
} 
</style>
</head>
<body>
  <h1>Hello World</h1>
<p>Welcome to Technalay </p>
</body>
</html>

अभी तक हमने सीखा जिसमे single element या id, class को select कर रहे थे अब हम सीखेंगे एक साथ एक से अधिक elements को कैसे select करते है।

Group selector

जब हमे एक से अधिक element को select करना होता है या कई elements में same style apply करना होता है, तो हम group selector का उसे कर रहे होते है। जिसमे आप Id, class, element name को एक साथ लिख रहे होते है।

मान लो आपको तीन अलग अलग element में के color को रेड करनी है तो

#myID{color: blue;}
.myclass{color: blue;}
span{color: blue;}

ऐसा ना लिख के आप कुछ ऐसा लिख सकते है जो आपके लिए एक best practice रहेगा :

#myID, .myclass, span{color: blue;}

<!DOCTYPE html>
<html>
<head>
<style>
#myID, .myclass, span{color: blue;} 
</style>
</head>
<body>
  <h1 id="myid">Hello World</h1>
<p class="myclass">Welcome to Technalay </p>
  <p>Thank<span>You</span></p>
</body>
</html>

Attribute selector

किसी भी एलिमेंट को style देने के लिए आप ID, Class के अलावा attribute के नाम से भी target या select कर सकते है, जिसके लिए आपको उस element के साथ कोई attribute लिखना पड़ेगा जैसे कि element[attribute]

<!DOCTYPE html>
<html>
  <head>
  
    <style>
      body {background-color: black;}
      h2[test='attribute'] {color: red;}
   </style>
    
  </head>
  <body>
    <h2 test='attribute'>Welcome to Technalay</h2>
  </body>
</html>

इसे भी पढ़े: HTML practice projects for beginners with source code