हेल्लो दोस्तों! आपको पिछले पोस्ट में बताया जा चूका है की css क्या होता है और कैसे काम करता है आज इस पोस्ट में Selector in Css in Hindi के बारे में बताया जा रहा है की css selector क्या है तो चलिए शुरू करते है
Contents
CSS selector का परिचय
CSS के syntax में selector का बहुत बड़ा role होता है आप किस element के उपर कौन सी style apply करना चाहते है ये आप selector(Selector in Css in Hindi) के द्वारा किया जा सकता है ये CSS के selector इतने powerful और efficient language होते है की webpage में text की style को ही बदल देते है
Selector कई प्रकार के होते है (types of selectors)
CSS के द्वारा कई तरह के selector provide किये जाते है जिसका प्रयोग करके आप और भी text को designing या accurately के लिए काम कर सकता है
इन सभी selector(Selector in Css in Hindi) के बारे में निचे details से दिया जा रहा है
element type selectors
इस तरह के selectors किसी एक html tag पर apply करने के लिए किया जाता है इस selector का name उसी html tag के name से होता है जब आप किसी particular tag पर apply करना चाहते है तो इस selector का प्रयोग किया जाता है
इसका example निचे दिया जा रहा है
<html>
<head>
<title>element selector</title>
<style>
h2{
color:blue;
}
</style>
</head>
<body>
<h2>element selector apply tags</h2>
</body>
</html>Universal selector
Universal selector को * के द्वारा इसे represent किया जाता है इस selector में define किये गए style सभी html element पर apply हो जाते है
लेकिन ये तभी काम करता है जब किसी element के लिए style अलग से define न किया गया हो
अगर किसी element के लिए अगल से style define किया गया हो तो या फिर वह element inline style sheet का प्रयोग करता है तो इस selector का कोई इफ़ेक्ट उस element पर नही पड़ेगा
<html>
<head>
<title>universal selector</title>
<style>
*{
color:blue;
}
</style>
</head>
<body>
<h2>element selector apply tags</h2>
</body>
</html>sub-element selector
यदि आप किसी element के उपर तब CSS apply करना चाहते हो जब वह element में sub-element में apply करना हो तो sub-element selector का प्रयोग किया जाता है
सबसे पहले आप main element का name <style> tag की body में define किया जाता है उसके बाद space देकर आप sub-element का name लिखते है जिसपर आप apply करना चाहते है
for example
<html>
<head>
<title>sub-element selector</title>
<style>
h1 span{
color:blue;
}
</style>
</head>
<body>
<h2>element<span> selector </span> apply tags</h2>
</body>
</html>इस example में आप देख सकते है की h1 tag में sub-tag <span> में apply किया गया है यानी इसका effect <span> tag में text पर (selector) text पर color blue हो जायेगा
class selector
हर html एक class define करता है इस attribute के द्वारा element की class define किया जाता है आप चाहे तो style class attribute के base पर apply कर सकते है इसके लिए आप (.) operator लगाकर class का name selector की तरह लिखते है जिसमे जो जो elements उस class से belong करते है उन सभी पर define की गयी style apply हो जाती है
<html>
<head>
<title>class selector </title>
<style>
.myclass{
Color:blue;
}
</style>
</head>
<body>
<h1>heading level first</h1>
<h2 class=”myclass”>sub heading level second </h2>
<p>content effect only class element content</p>
</body>
</html>ID SELECTOR
class attribute की तरह ही आप style को किसी particular id के लिए भी define किया जाता है जिन html element(tag) की id इस id से match करता है तो वह उन्ही पर apply हो जाती है किसी भी id पर style apply करने के लिए आप # का प्रयोग करते है
<html>
<head>
<title>id selector </title>
<style>
#myid{
Color:blue;
}
</style>
</head>
<body>
<h1>heading level first</h1>
<h2 id=”myid”>sub heading level second </h2>
<p>content effect only particular id element content</p>
</body>
</html>Attribute Selector
html tag के जैसे ही आप चाहे तो किसी html tag के attribute को प्रयोग करते हुए भी style apply कर सकते है इन selector का प्रयोग form tag के sub-element के लिए किया जाता है आप input type के according दुसरे attribute को छोड़कर हुए किसी एक attribute को टारगेट कर सकते है
आपको एक example के द्वारा समझाते है
<html>
<head>
<title>attribute selector </title>
<style>
img[alt=”mypic”]{
width:150px;
height:150px;
</style>
</head>
<body>
<img src=”url-here” alt=”mypic”>
<img src=”url-here” alt=”some other pic”>
</body>
</html>इससे आप समझ सकते है की css style सिर्फ उसी image पर apply होगी जहा alt attribute की value mypic है इससे attribute को पता चलता है की alt=mypic पर image का width और height को change करना है
Group Selector
आप चाहे तो एक साथ एक से ज्यादा selectors का भी प्रयोग किया जा सकता है इसके लिए आप सभी selectors को comma(,) से separate करते है curly brackets में define की गयी style सभी selector पर apply होती है
<html>
<head>
<title>class selector </title>
<style>
h2,p{
Color:blue;
}
</style>
</head>
<body>
<h2 >sub heading level second </h2>
<p>content effect group selector element content</p>
</body>
</html>
reference-https://www.javatpoint.com/css-selector
निवेदन :-अगर आपको यह आर्टिकल उपयोगी लगा हो तो इस आप अपने क्लासमेट ,दोस्तों के साथ अवश्य share कीजिये और आपके जो भी इस पोस्ट्स से related(सम्बन्धित) questions है तो आप उन्हें निचे कमेंट कर सकते है हम उसके answer अवश्य करेंगे Thank