 |
| HTML and CSS tutorial for beginners in Hindi |
हेलो फ्रेंड्स, KTL के HTML और CSS tutorial में फिर स्वागत है। आज हम लेसन ३९ सीखेंगे।
पिछले लेसन में हम ने CSS overflow property के बारे में सीखा।
आज हम pseudo-classes सीखेंगे।
Pseudo-classes
Pseudo-classes कुछ selectors को special effects देते हैं। Pseudo-class का syntax ऐसा होता है।selector: pseudo-class {property: value}
हम pseudo-classes के साथ class भी दे सकते हैं। उसका syntax ऐसा होता है।
selector.class: pseudo-class {property: value}
हमने कुछ pseudo-classes इससे पहले हैं और उनका हमारे कोड में उपयोग किया है। हमने lesson-26 में लिंक को स्टाइल करने के लिए कुछ pseudo-classes का उपयोग किया है। आज हम उनको समझ लेते हैं।
Lesson-26 में हमने लिंक के स्टाइल में लिखा है -
a:link {
color: green;
background-color: black;
}
इस में "a" selector है और "link" pseudo-class है। ऐसे ही हमने a:visited, a:hover वगैरह दिए हैं।
First-child pseudo-class in Hindi
हम और एक pseudo-class देखेंगे। इस का नाम first-child है। इस को समझ लेने के लिए हम एक स्क्रिप्ट लिखेंगे।
एक नयी Notepad फाइल ओपन कीजिये। इस में Lesson-38-2 का कोड कॉपी कीजिये। इस में para1 के लिए दी हुई स्टाइल डिलीट कीजिये और p tag में दिया हुआ class="para1" डिलीट कीजिये। Heading डिलीट कीजिये। अब first-child के लिए आज स्टाइल लिखिए।
p:first-child {
font-weight:bold;
color:red;
}
इस में p selector है और first-child pseudo-class है।
 |
| आकृति ३९-१ Pseudo-class - first-child |
इस फाइल को "Lesson-39-1" और "Lesson-39-1. html" के नाम से save कीजिये। HTML फाइल पर डबल क्लिक कीजिये और आउटपुट देखिये।
 |
| आकृति ३९-२. Pseudo-class - first-child |
पहला paragraph लाल रंग में डिस्प्ले हुआ है और bold आया है।
अब first-child का और एक उदाहरण लेते हैं।
<style>
p > b:first-child {
color: red;
}
इस में "p" paragraph के लिए है, "b" - bold के लिए है, इसलिए यह देखा जाएगा की बोल्ड कहाँ है। हमने first-child दिया है। इस लिए हर एक paragraph में केवल पहले बोल्ड शब्दों को red किया जाएगा।
अब एक नयी Notepad फाइल ओपन कीजिये। इस में Lesson-39-01 का कोड कॉपी कीजिये। पहले लिखी हुई first-child की स्टाइल डिलीट कीजिये और ऊपर दिया हुआ कोड कॉपी कीजिये। दोनों paragraph में कुछ शब्दों को bold कीजिये। निचे दी हुई आकृति देखिये। इस फाइल को "Lesson-39-02" और "Lesson-39-02.html" के नाम से save कीजिये।
 |
| आकृति ३९-३. Pseudo-class - first-child |
HTML फाइल को डबल क्लिक कीजिये। आउटपुट देखिये।
 |
| आकृति ३९-४. Pseudo-class - first-child |
हर एक paragraph में केवल पहले बोल्ड शब्दों को red कलर आया है।
Important Points:
१. Pseudo-class लिखने के लिए selector का नाम और pseudo-class लिखा जाता है। इस से हम कुछ selectors को special effects दे सकते हैं।२. First-child एक pseudo-class है जिसका उपयोग करके किसी condition के सिर्फ पहले occurrence को स्टाइल दे सकते हैं।
लेसन ३८ लेसन ४०
