Types of Selectors: Element, Class, ID In Hindi
सीएसएस सलेक्टर एचटीएमएल वेब पेज में पर्टिकुलर एलिमेंट या टैग पोरशन को सीएसएस स्टाइल अप्लाई करने में हेल्प करते है. आप पहले टॉपिक में सीएसएस सलेक्टर्स के बारे में पढ़ चुके है, तो चलिए फिर एक बार सीएसएस सलेक्टर्स को बेहतर तरीके से जाने। आप एचटीएमएल वेब पेज के लिए मुख्य रूप से 3 प्रकार के सीएसएस सलेक्टर ऐट्रिब्यूट्स को अप्लाई कर सकते है. जिसमे, एलिमेंट सीएसएस सलेक्टर, क्लास सीएसएस सलेक्टर, और आईडी सीएसएस सिलेक्टर, चॉइस डिफ़ॉल्ट है.
Element CSS Selector.
एलिमेंट सीएसएस सलेक्टर को किसी पर्टिकुलर एचटीएमएल वेब पेज टैग एलिमेंट वैल्यू या ऑब्जेक्ट को टारगेट कर सीएसएस सलेक्टर स्टाइल इफ़ेक्ट ऐट्रिब्यूट्स को अप्लाई किया जाता है. एलिमेंट सीएसएस सलेक्टर के रूप में आप अपने वेब पेज में किसी हैडिंग टैग, पैराग्राफ टैग, या अन्य किसी टैग के लिए स्पेसिफिक ऑब्जेक्ट वैल्यू और सीएसएस सलेक्टर प्रॉपर्टीज को इंडिविजुअल ऑब्जेक्ट और एक समय में सभी सीएसएस ऑब्जेक्ट वैल्यू पर अप्लाई कर सकते है।
CSS Element Selector syntax.
html tag element {
css property: tag value;
}
CSS Element Selector Example.
p {
color: teal;
font-family: times new roman; /* all paragraph text display with times new roman font */
font-size: 4rem;
}
CSS Element Selector example.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Element Css Selector Script Code</title>
<body>
<style>
p {
color: lime; /* display p tag color lime */
font-size: 2em; /* display 2em paragraph text font size */
}
h1 {
font-family:Symbol;
color:red;
font-weight: bold; /*display heading1 tag bold effect */
}
h2 {
color:brown;
font-style: italic; /* display heading2 text italic format */
}
</style>
<p> This Is Element Css Selector Css Script Code</p>
<h1>This Is A Heading 1</h1>
<h2>This Is Heading 2</h2>
</body>
</html>
Element CSS Selector Usage – सीएसएस में एलिमेंट सलेक्टर को किसी पर्टिकुलर एचटीएमएल वेब पेज टैग एलिमेंट में स्पेशली सभी टैग एलिमेंट को एक ही सीएसएस प्रॉपर्टीज ऐट्रिब्यूट्स से स्टाइल करना हो. जैसे, पेज पैराग्राफ, हेडर टेक्स्ट, आदि है, एलिमेंट सीएसएस सलेक्टर वेब पेज में यूनिवर्सल सीएसएस स्टाइल को अप्लाई करता हैं।
Class CSS Selector.
आप एचटीएमएल वेब पेज में किसी पर्टिकुलर क्लास सीएसएस सलेक्टर का उपयोग वेब पेज में डिक्लेअर क्लास टैग ऐट्रिब्यूट्स और सीएसएस स्टाइल को अप्लाई कर सकते है. सबसे पहले एचटीएमएल वेब पेज में क्लास ऐट्रिब्यूट्स को डिक्लेअर और डिफाइन किया जाता है, याद रखे की, सीएसएस में क्लास को स्टाइल करने के लिए एक पॉइंट [.] के साथ वेब पेज सीएसएस कोडिंग में डिस्प्ले किया जाता है।
Class CSS Selector syntax.
.classname {
class css property: class value;
}
Class CSS Selector Example.
.highlight {
background-color: lime; /* class display or “highlight” with lime background color */
font-weight: bold;
font-size: 2em;
}
Individual use of class selector in HTML.
<p class=”highlight”>It Highlight Paragraph Text </p> /* display or “highlight” paragraph text with highlighted color */
<p>This paragraph a simple paragraph and it is not highlighted.</p>
Class CSS Selector example.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Class Css Selector Script Code</title>
<style>
.highlight {
background-color: aqua; /* display the highlighted class color with aqua */
font-weight: bold;
font-size: 27px; /* set the font text size 27px format*/
font-style: italic;
}
.display{
background-color: yellow; /* display the highlighted class color with yellow */
font-weight: bold;
font-size: 30px; /* set the font text size 30px format*/
font-style: italic;
}
</style>
<body>
<div class=”highlight”>Everything put in div class text highleted with aqua color.</div>
<p class=”highlight”>Paragraph text highlighted with same aqua color</p>
<p>It Is A Simple Paragraph, and it is not highlighted with class selector effect.</p>
<h1 class=”display”>The Heading text highlighted with same yellow color</h1>
</body>
</html>
Advantages of class CSS selector.
एचटीएमएल वेब पेज में क्लास सीएसएस सलेक्टर को डिक्लेअर कर कई बार वेब पेज के अन्य हिस्सों में स्टाइल ऐट्रिब्यूट्स को री-यूज़ किया जा सकता है, क्लास सीएसएस सलेक्टर को मौजूदा वेब के कई अन्य टैग एलिमेंट में एक ही प्रकार के सीएसएस क्लास सलेक्टर इफ़ेक्ट ऐट्रिब्यूट्स और स्टाइल को अप्लाई करने में उपयोग किया जाता है।
ID css selector.
एचटीएमएल वेब पेज में आईडी सीएसएस सलेक्टर को एचटीएमएलl वेब पेज में किसी पर्टिकुलर टैग एलिमेंट को स्पेशली टारगेट कर सीएसएस स्टाइल ऐट्रिब्यूट्स इफ़ेक्ट को अप्लाई किया जाता है। याद रहे, जिस भी एचटीएमएल वेब पेज में आप आईडी सलेक्टर प्रॉपर्टीज यूनिक और हर बार अलग होनी चाहिए और इन आईडी ऐट्रिब्यूट्स सीएसएस डिक्लेरेशन से पहले सीएसएस में हैश [#] सिंबल के साथ प्रीव्यू किया जाता है।
ID CSS selector syntax.
#uniqueidname {
id property: id value;
}
ID CSS selector example.
#main-paragraph {
color: brown; /* it add main-paragraph id color with brown */
font-size: 2em;
}
Use of the ID CSS selector in HTML tags.
<p id=”main-paragraph”>Simple Example of Paragraph Text </p>
ID css selector example.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Id Css Selector Script Code</title>
<style>
#display {
color: yellow; /* display the text color yellow */
background-color: teal; /* display the teal backgroudn color */
padding: 20px; /* add padding effect 20px */
text-align: center; /* align class text in center */
font-family: monotype corsiva;
font-size: 2em; /* display the text font size 2em */
}
</style>
<body>
<div id=”display”>This Is The Id Css Selector Script Code</div>
<p>This Is A Ordinary Html Paragraph Text</p>
</body>
</html>
Advantages of ID CSS selector.
किसी भी एचटीएमएल वेब पेज में आईडी सिलेक्टर ऐट्रिब्यूट्स वेब डेवलपर को सीएसएस स्टाइल को किसी वेब पेज में सिंगल, यूनिक एलिमेंट को टारगेट कर सीएसएस के साथ स्टाइल और ऐट्रिब्यूट्स को अप्लाई किया जाता है. सीएसएस आईडी ऐट्रिब्यूट्स से आप पर्टिकुलर वेब पेज एलिमेंट टैग पर पर्टिकुलर सीएसएस स्टाइल और ऐट्रिब्यूट्स को केवल आईडी टैग एलिमेंट में ही अप्लाई किया जाता है।
css selector explanation in HTML.
- element css selector – मौजूदा एचटीएमएल वेब पेज में एलिमेंट सलेक्टर से वेब पेज के टैग एलिमेंट को स्टाइल करे, जैसे, p tag, h1 tag, आदि है।
- class css selector – मौजूदा एचटीएमएल वेब पेज में डिक्लेअर क्लास को यूनिक. classname के साथ एक ही क्लास टैग एलिमेंट को स्टाइल करे।
- id css selector – मौजूदा एचटीएमएल वेब पेज में यूनिक आईडी #idname का उपयोग कर वेब पेज एलिमेंट को स्टाइल करे।
