CSS Selectors in Hindi: एक CSS selector एक सीएसएस शैली कॉल का हिस्सा है जो यह पहचानता है कि वेब पेज के किस हिस्से को स्टाइल किया जाना चाहिए। Selector में एक या अधिक गुण होते हैं जो परिभाषित करते हैं कि चयनित (selected) HTML कैसे है।
इस ट्यूटोरियल में, हम यह जानने जा रहे हैं कि Selectors क्या है (What is a CSS Selectors in Hindi)?, Selectors के प्रकार और CSS चयनकर्ता (selector) का उपयोग कैसे कर सकते हैं। यानी कि CSS Selectors की पूरी जानकारी हिंदी में सीखेंगे।
मुझे आशा है कि आपको पता है कि CSS क्या है? यदि नहीं, तो पहले हमारे “CSS basic tutorial” को पढ़ें।
Table of Contents
CSS का संक्षिप्त परिचय
CSS का पूरा नाम “Cascading Style Sheets” है। HTML elements स्क्रीन पर प्रदर्शित कैसे होगा यह वर्णन करता है। यानि की CSS ही HTML document के फोंट से लेके हर एक चीज़ को style करने में मदद करता है। इंटरनेट पर, अधिकांश वेबसाइट CSS से ही डिज़ाइन किया हुआ हैं। किसी भी वेब पेज को डिज़ाइन करने के लिए तीन प्रकार की CSS का उपयोग कर सकते है।
विवरण में जैनने के लिए “CSS के प्रकार (Types of CSS)” को पढ़े।
CSS Selectors in Hindi (CSS Selectors क्या है)
CSS Selectors CSS Rule का पहला भाग होता है। यानी कि वेब पेज में CSS property add करने के लिए CSS Selector का उपयोग किया जाता है। यह elements और अन्य शब्दों का एक पैटर्न है जो ब्राउज़र को बताता है कि HTML टैग के अंदर CSS property values का चयन करना चाहिए।
जैसे कि अगर आपको <h2> टैग में CSS style करना है तो आप Selector का उपयोग करके <h2> का रंग या size आदि दे सकते हैं।
Selectors द्वारा चुने गए elements को चयनकर्ता (Selectors) के विषय के रूप में संदर्भित किया जाता है।
सरल शब्द में, CSS Selectors का उपयोग उन HTML elements को खोजने या चुनने के लिए किया जाता है जिन्हें आप स्टाइल करना चाहते हैं।
- CSS को अच्छी तरह समझने के लिए CSS का Syntax को समझें इससे कोड करना आसान होगा।
Example of CSS Selectors in Hindi
CSS Selectors का उपयोग करने के लिए नीचे उदाहरण देखें:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align: center;
color: red;
}
p {
text-align: center;
color: blue;
}
h2 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Every h1 will be affected by the style.</h1>
<p>Visit www.tutorialinhindi.com</p>
<h2> Wait, Wait Me too!</h2>
</body>
</html>
इस उदाहरण हमने CSS selector का उपयोग करके <h1>, <p> और <h2> टैग को स्टाइल किया गए है।
इसका output वेब ब्राउज़र में कुछ इस तरह दिखेगा:
Types of CSS Selectors in Hindi (CSS Selector के प्रकार)
CSS Selectors के पांच श्रेणियाँ को कुछ इस रूप में divide किया जा सकता है:
- Simple selectors: इसमें id, class और name के आधार पर elements का select किया जाता है।
- Attribute selectors: इसमें attribute और attribute value के आधार पर चयन किया जाता है।
- Pseudo-elements selectors: इसका उपयोग element का एक हिस्सा select करके स्टाइल किया जाता है।
- Combinator selectors: elements बीच एक विशिष्ट संबंध के आधार पर तत्वों का चयन किया जाता है।
- Pseudo-class selectors: इसमें एक निश्चित स्थिति के आधार पर तत्वों का चयन करने के लिए उपयोग किया जाता है।
चलिए कुछ basic CSS selectors के बारे में जानते है;
Class Selector in CSS in Hindi
CSS Class Selectors एक निर्दिष्ट class attribute के साथ HTML elements को सलेक्ट करता है। इसका उपयोग फुल स्टॉप (.) द्वारा किया जाता है और उसके बाद स्टाइल ब्लॉक में class का नाम आता है।
CSS Classes आपको HTML तत्वों को जल्दी से स्टाइल करने में मदद करेगी। इसके अलावा, आप एक जैसे स्टाइल का उपयोग करने वाले प्रत्येक HTML तत्व के लिए एक ही कोड को दोहराने से बच सकते हैं।
विशिष्ट class वाले element को select करने के लिए, class नाम के पहले (.) वर्ण लिखें जाता है। कुछ इस तरह:
CSS class Selector का उदाहरण:
.center {
text-align: center;
color: blue;
}
.center यह एक CSS class selector है। CSS class सेट करने के लिए element में class="center" देना होता है।
नोट: CSS class नाम “center” के जगह आप कुछ भी रख सकते है। लेकिन number से शुरू नहीं कर सकते है।
Id Selector in CSS in Hindi
CSS Id selector किसी भी HTML तत्व पर id विशेषता लागू हो सकती है। इस विशेषता का मान तत्व का विशिष्ट पहचानकर्ता है। उदाहरण के लिए, <h2 id="Heading"> उस तत्व को mainHeading का एक विशिष्ट पहचानकर्ता देता है।
CSS ID घोषित करने का सिंटैक्स class के समान ही है, सिवाय इसके कि डॉट (.) का उपयोग करने के बजाय, आप हैश (#) का उपयोग करते हैं।
#id-name { property:value; }सीएसएस Id Selector का उदाहरण:
<!DOCTYPE html>
<html>
<head>
<style>
#text1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="text1">Hi Tutorialinhindi.com</p>
<p>यह पैराग्राफ प्रभावित नहीं होगा।</p>
</body>
</html>
#text1 यह एक CSS Id selector है। HTML element में CSS id सेट करने के लिए id="text1" देना होता है।
CSS Element Selector
CSS element selector नाम से HTML तत्व का चयन करता है और इसको Type Selector के रूप में भी जाना जाता है। मूल रूप से, CSS में Element Selector समान नाम वाले HTML तत्वों से मिलान करने का प्रयास करता है।
p{
text-align: center;
color: blue;
} यहाँ p एक CSS element selector है। HTML element में जितने भी <p> टैग का उपयोग होगा सब element selector होगा।
Learn Complete CSS Tutorial in Hindi
पूरी CSS Tutorial हिंदी में सीखने के लिए अभी नीचे दिए गए लिंक पर क्लिक करे और आसानी से CSS सीखना शुरू करें।
निष्कर्ष: CSS selector से आप क्या समझते हैं?
एक CSS selector एक सीएसएस नियम का हिस्सा है जो आपको उस तत्व का चयन करने की अनुमति देता है जिसे आप HTML दस्तावेज़ के भीतर प्रकार, attributes या स्थान के आधार पर स्टाइल करना चाहते हैं।
इस सबक में अपने सिखा की एक CSS Selectors का उपयोग किसी भी HTML elements को select करके style करने के लिए किया जाता है।
मुझे उम्मीद है कि अब आप समझ गए होंगे कि CSS Selectors क्या है (CSS Selectors in Hindi) और यह कैसे काम करता है। यदि आप एक वेब डेवलपर बनना चाहते हैं तो आपको HTML, जावास्क्रिप्ट, jQuery और PHP भी सीखनी चाहिए।
यदि आपके पास CSS चयनकर्ता के बारे में कोई प्रश्न हैं तो नीचे comment करके पूछ सकते है।