- Selectors in CSS in Hindi
- Introduction to CSS Selectors in Hindi
- Types of CSS Selectors in Hindi
Introduction to CSS Selectors
CSS selectors का उपयोग उस सामग्री का चयन करने के लिए किया जाता है जिसे आप style करना चाहते हैं । selectors CSS rule set का हिस्सा हैं। CSS selectors अपनी id, वर्ग, प्रकार, विशेषता आदि के अनुसार HTML तत्वों का चयन करते हैं।
CSS में कई अलग-अलग प्रकार के selectors होते हैं।
- सीएसएस तत्व चयनकर्ता
- सीएसएस आईडी चयनकर्ता
- CSS क्लास चयनकर्ता
- सीएसएस यूनिवर्सल चयनकर्ता
- CSS Group Selecter
1) CSS Element Selector
Element selectors, नाम से HTML Element का चयन करता है।
<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html> आउटपुट:
2) CSS Id Selector
Id Selector एक विशिष्ट Element का चयन करने के लिए एक HTML Element की Id attribute का चयन करता है। एक Id हमेशा पृष्ठ के भीतर unique होती है इसलिए इसे single, unique Element का चयन करने के लिए चुना जाता है।
यह hash character (#) के साथ लिखा गया है, इसके बाद Element की id है।
आइए आईडी “para1” के साथ एक उदाहरण लें।
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p id="para1">Hello hinditutorialspoint.com</p>
<p>This paragraph will not be affected.</p>
</body>
</html> आउटपुट:
3) CSS Class Selector
class selector एक विशिष्ट class attribute के साथ HTML तत्वों का चयन करता है। यह एक period character के साथ प्रयोग किया जाता है . (फुल स्टॉप सिंबल) वर्ग नाम के बाद class name
नोट: एक class का नाम एक संख्या के साथ शुरू नहीं किया जाना चाहिए।
चलो एक class “center” के साथ एक उदाहरण लेते हैं।
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="center">This heading is blue and center-aligned.</h1>
<p class="center">This paragraph is blue and center-aligned.</p>
</body>
</html> आउटपुट:
CSS Class Selector for a specific element
यदि आप यह निर्दिष्ट करना चाहते हैं कि केवल एक विशिष्ट HTML Element प्रभावित होना चाहिए तो आपको class selector के साथ Element नाम का उपयोग करना चाहिए।
एक उदाहरण देखते हैं।
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="center">This heading is not affected</h1>
<p class="center">This paragraph is blue and center-aligned.</p>
</body>
</html> आउटपुट:
4) CSS Universal Selector
universal selector का उपयोग wildcard character के रूप में किया जाता है। यह पृष्ठों पर सभी तत्वों का चयन करता है।
<!DOCTYPE html>
<html>
<head>
<style>
* {
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<h2>This is heading</h2>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html> आउटपुट:
5) CSS Group Selecter
grouping selector का उपयोग सभी तत्वों को एक ही style definitions के साथ select करने के लिए किया जाता है।
कोड को कम करने के लिए Grouping selector का उपयोग किया जाता है। Commas का उपयोग grouping में प्रत्येक selector को अलग करने के लिए किया जाता है।
group selector के बिना CSS कोड देखते हैं।
h1 {
text-align: center;
color: blue;
}
h2 {
text-align: center;
color: blue;
}
p {
text-align: center;
color: blue;
} जैसा कि आप देख सकते हैं, आपको सभी तत्वों के लिए सीएसएस properties को परिभाषित करने की आवश्यकता है। इसे निम्नलिखित तरीकों से grouped किया जा सकता है:
h1,h2,p {
text-align: center;
color: blue;
} आइए CSS group selector का पूरा उदाहरण देखें।
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello Javatpoint.com</h1>
<h2>Hello Javatpoint.com (In smaller font)</h2>
<p>This is a paragraph.</p>
</body>
</html> आउटपुट:
