🎨 Learn CSS Pseudo Classes & Elements | Hover, Focus, Before, After Explained

Name: 🎨 Learn CSS Pseudo Classes & Elements | Hover, Focus, Before, After Explained
Uploaded: 2025-12-10T06:51:34+00:00
Duration: 1 h 1 min 52 s
Channel: skillwaala

skillwaala

28 minutes ago

👨‍💻 What You’ll Learn in This Class:
✅ What are Pseudo Classes in CSS
✅ Common pseudo classes — :hover, :active, :focus, :first-child, :last-child
✅ What are Pseudo Elements — ::before, ::after, ::first-letter, ::selection
✅ Difference between Pseudo Class and Pseudo Element
✅ How to add hover effects, highlight text, and decorate content dynamically

Category

📚

Learning

Transcript

Display full video transcript

00:00:00hello guys good evening everyone

00:00:05good evening Sibul, Sainath, Ravi, Sivakshi, Sivakshi, sorry, Kaushalya, Deepika, Ravi

00:00:30Mice & In 불iałac, Triangle or near01, Laugh

00:00:32ince & Click share it now and after that we will activate the video to carry your

00:00:45room in betweenutter and push Mai to focus again an honor now

00:00:50that we will do not really despite evening worship

00:00:55ठीक है

00:01:06ठीक है चलो आज अपन डिसकस करेंगे वोई CSS टॉपिक अपना चल रहा है

00:01:23अपने डिसकस करेंगे कल जो अपने देखा था वो अपने कुछ बॉक शेडो और आउटलाइन ऐसे कुछ चीजों पर डिसकस किया था उसी में अपन आज आगे डिसकस करते हैं और कौन-कौन से अपने पास प्रोपर्टीज आती है जो अपन यहां पर यूज करते है चलो आ�

00:01:53दौक लाश से उसके पर आजाते हैं पन एक नया फोल्डर बना लेता हूं और मैं आपको क्लास कोड भी प्रवाइड कर दूँगा ठीक है कर नया फोल्डर ही यहीं पर बना देता हूं अभी के लिए मैं

00:02:07पहले भी बनाया था I know लेकिन इस बार जो बना रहे हैं उसका मैं कोड आपको दे दूँँगा

00:02:16क्योंकि सिस्टम फिर से चेंज हो गया तो एक बार के लिए यहाँ पर सारा कोड लिख लेते हैं बाके का कोड मैं इसमें ले लूँँगा फिर उसके बाद मैं आपको कोड प्रोवाइड कर दूँगा तो यहाँ पर अपने CSS का फोल्डर बना लेते हैं नहीं तो कल जो फोल्�

00:02:46अपने अपनी बॉक्स के पर शैडव क्रिएट करना यह सारी चीज डिसकस करी थी और आउट्लाइन और बार्डर की इस तरीके से अलग है यह भी अपने डिसकस करा था आज अपन आगे डिसकस करते हैं ठीक है तो अब देखो अपने स्लेक्टर सपने पढ़े थे और स्लेक

00:03:16कि सुडो क्लास स्लेक्टर क्या काम आते है और सुडो एलिमेंट स्लेक्टर यहां पर क्या काम आते है ठीक है इन दोनों चीज़ों के उपर अपन यहां पर डिसकस करते हैं आज

00:03:46वैदर वैस ब्रैक सबके हो रही है क्या

00:03:58हे बीच में हो रहा था सर नाव क्लीर अगर वीच में थोड़ी सी अगर वैस ब्रेक हो 10 हो सकती है τοड़ी सी तो

00:04:07लेकिन अगर continue class में voice break हो रही है तो बता देता हूं, ठीक है, तो चलो अपन यहाँ पर अपने pseudo class selector और pseudo element selector के पर discuss करते हैं,

00:04:21तो मैं यहाँ पर बनाई लेता हूं, एक class pseudo class.stml अपन यहाँ पर अपनी class बना लेता हैं, ठीक है, और यहाँ पर अपन लगा लेता हैं, अब देखो, pseudo class, जो selector होते हैं, वह क्या काम आते हैं,

00:04:39क्या सिंटेक्स होता है सबसे पहले इसका सिंटेक्स समझो सुदो क्लास का सिंटेक्स क्या होता है और सुदो एलिमेंट का क्या सिंटेक्स होता है जैसे यहीं पर मैं टेक्स वाइल बना देता हूं जिसको मैं यहां पर करता हूं

00:04:52example.txt

00:04:55अब देखो यहाँ पर अपने पास जो अपने

00:04:59pseudo class होता है उसका syntax क्या होता है

00:05:02अपने यहाँ पर अपने syntax की बात करते है

00:05:05कि pseudo class का syntax क्या होता है

00:05:07तो अपने पास अपना selector होता है

00:05:08कि आपको किस selector को target करना है

00:05:10क्योंकि हो सकता है कि किस element की उपर

00:05:12आपने पहले से CSS लगा रखी है

00:05:14लेकिन sudo class के थूँ आप

00:05:16उसकी CSS को change करना चाते हो

00:05:18तो वहाँ पर इसका syntax होता है

00:05:20selector की, किस selector को target करना चाते हो

00:05:22colon, फिर उसके बाद आपके पास

00:05:25जो भी आपकी sudo class है

00:05:26ठीक है

00:05:28जो भी आपके पास यहाँ पर आपकी

00:05:30sudo class है

00:05:32pseudio

00:05:40ठीक है, sudo class

00:05:42यह होता है अपने पास

00:05:43तो जो भी आपकी यहाँ पर sudo class है

00:05:45वो अपन यहाँ पर लिखेंगे

00:05:46फिर उसके बाद वही अपना

00:05:48curly braces और उसकी property और value

00:05:51ठीक है, फिर वही curly braces

00:05:52फिर उसके बाद आपकी जो भी

00:05:54property होगी और उसकी जो भी

00:05:56value होगी, वो आप यहाँ पर pass कर दोगे

00:05:58यह syntax होता है, अपने किसका

00:06:00अपने sudo class का

00:06:02मैंने यहाँ पर यह syntax बता है, यह अपने

00:06:04sudo class का syntax है

00:06:05ठीक है? तो यह sudo class का syntax

00:06:08अपना होता, selector, फिर उसके बाद

00:06:10colon, फिर उसके बाद जो भी आपकी

00:06:12sudo class है, फिर उसके बाद property

00:06:14और value अब pseudo class आती कुन-कुन सी अपने पास वो अपन discuss कर लेते कि pseudo class अपने पास यहां पर होती कुन-कुन सी है तो pseudo class एक तो अपने पास होती है अपनी first line अगर आपको first line वाली

00:06:26सूद लगानी एक अपने पास यहां पर होती एह अपनी यहां पर फर्स्ट लेटर है वोस्ट लेटर भी आपकी फॉडो क्लास होती एसे ही अपने पास एक तो पनने देखी थी ठीक है

00:06:42कि यह एक मिनिट एक मिनट एक मिनट फॉर्स लाईन फॉर्सलेटर यह तो सूदोअकर होते इस

00:06:48सूदोअलिमेंट्स होते हैं सूदो ट्लास अपने पास अपना होकर होता यह तो

00:06:54मसलास अपने देखाता है ये का द intelligent आ हमेलिब्स डींस चाइ HOLTcrire फैसले ही अपने

00:07:04प्रस्ट चाइल्ड होती है एक सूडो क्लास ऐसे ही अपने पास यहां पर अपने पास अपना एने चाइल भी होता है एने चाइल्ड ये भी अपने पास अपनी सूडो क्लास होती है ठीक है उसके बाद अपने पास अगर अपन सूडो क्लास की बात करें तो और भी होती है अ�

00:07:34अपनी sudo classes होती है देखो use कैसे करते है वो चीज़ अपन समझते है एक बार के लिए ठीक है किस तरीके से अपन इसको use करते है तो चलो अपन यहां पर आ जाते है अपने वही जो फाइल मैंने यहां पर बनाई थी sudo class करके अब देखो यहां पर मैंने कोई भी element लिया यहां प

00:08:04benिया इसे तो सरी के सुसे चलिकलताइब को

00:08:22सब्छावन क्या सब्सक्राइब निजहां उत तो अपने पास एक अपना एश्वण

00:08:28यहाँ पर इस तरीके से create हो क्या जाएगा इसी के अंदर में यहाँ पर कहता हूँ कि आप padding भी लगा दो all direction से और all direction से 40 pixel की padding लगा दो इस पर ठीक है तो all direction से यहाँ पर 40 pixel की padding भी लग जाएगी अब पहली sudo class अपने यहाँ पर कौन से देखी पहली अपने पास यहाँ पर आ

00:08:58अपनी hover यूज करते हैं जैसे मालू मैं h1 tag पर ही करवाना चाता हूँ तो सबसे पहले क्या syntax देखा आपने इसका syntax अपने पास clear है अपना selector होता है फिर उसके बाद column फिर उसके बाद आपकी जो भी sudo class है फिर property और value कि आप क्या change करना चाते हो तो मैंने बोला h1 मेरा selector है

00:09:28देखी थी पहले भी जैसे मैं चाता हूँ कि यहां पर cursor भी change हो जाए और वो pointer हो जाए तो यहां पर इसका cursor भी change हो कि क्या हो जाएगा pointer हो जाएगा यह पहली अपने पास अपनी sudo class है जो अपने डिसकस भी कर लीती है तो यह अपने पास अपनी पहली sudo class है ठीक है active sudo class yes �

00:09:58टीक है यह जो सूडो क्लास अपन यूज लेते हैं ठीक है तो यह अपने देखी अपनी और वाली नेक्स अपन आगे चलते हैं

00:10:07दूसरी मैंने यहापर कौन सी बताई थी फर्स्ट चाइल अब देखो फर्स्ट चाइल क्या होता है जहां पर भी पैरेंट चाइल का कॉम्बिनीशन आ जाता है जैसे मालो आपने एक डिव के अंदर पांस डिव ले रखे हैं या फिर एक डिव के अंदर आपने दस डिव ले

00:10:37ले लिये है जैसे इतमे और इसके अंदर अपन सेंग पर इस यहां पर कोणटेंटय

00:10:42अपीं आता है इसमीं कोणटेंट यहां पर इस tätä है इंदर आके शुद। पर आ रहे हैं

00:10:55अपने पास अपने वो ही सारे list items आ रहे है आप देखो first child यहाँ पर क्या करता है

00:11:01first child का मतलब यह है कि इस unorder list के अंदर जितने भी list item है उसमें से आपको आपके first child को target करना है

00:11:09तो मैं यहाँ पर बोलूँगा कि unorder list जो है मेरी उसमें मेरे को यहाँ पर क्या करना है

00:11:14first child को target करना है तो मैं caller लगाँगा और मैं यहाँ पर लिखूँगा अपनी first child pseudo class

00:11:19फिर उसके बाद आपको first child पर जो भी property लगा दिनी है जैसे आपने बोला background color जो है वो इसका आप यहाँ पर yellow कर देना

00:11:26ठीक है यह आप कर देना तो यहाँ पर जो इस unorder list के अंदर जो first child होगा उसका background color yellow हो जाना चाहिए

00:11:33direction पास करो उसके अंदर unorder list के अंदर जो list है उस पर अपने को करना है तो देखो यहाँ पर first child के उपर इसका background color क्या हो जाएगा yellow हो जाएगा

00:11:44ऐसे ही last child को अगर आप target करना चाहते हो तो आप बोलोगी मेरे पास जो unorder list है उसके अंदर list item जो है उसमें जो मेरा last child है उसको मेरे को यहाँ पर target करना है और target करके जो भी आप करना चाहते हो जैसे मालो background color बोला मैंने बोला कि आप यहाँ पर gray कर देना उसका background color तो इसके अ

00:12:14यहाँ आप एध करदेता हूं और अपना data भी दिए जलदी से अपना data भी pass करदेता हूं सबके अंदर the sameiane में यहाँ पर किया पकाम आती है Viel sigue

00:12:38तो दो को एने चाइल काम आती है कि जब आप यहाँ पर इतने सारे अपने अपने चाइल ले रखे आपको इस इतने चाइल में से चाइल को यहाँ पर टारगेट करना है

00:12:49अब भी तो मैं कैसे टारगेट कर रहा हूँ मैं फर्स्ट और लास्ट को तो कर पा रहा हूँ

00:12:53फिर्स चायल और लास्ट चायल के दूँग। लेकिन मैं चाहता हूँ कि मैं इतने सारे मेरे पास चायल है, जैसे मैं आपको बला कि जो यहाँ पर 7 नंबर पर जो है उसको टारगेट करो, तो 1, 2, 3, 4, 5, 6, 7, 7 सब से लास्ट है तो लास्ट चायल से कर सकता है लेकिन 5 को बला

00:13:23मैं नंच चायल से यहाँ पर टारगेट करना चाहता हूँ, आपको टारगेट यह है, कि आपको class और id selector यहाँ पर यूज नहीं करना, उसके बिना आपको यहाँ पर टारगेट करना है fifth child को, तो कैसे करोगे, आप बोलोगे कि मेरे पास जो order list है, उसके अंदर जो list item है, उस

00:13:53फिफ्ट चाइल्ड को मेरे को target करना है

00:13:55तो यहाँ पर जो फिफ्ट चाइल्ड है वो target हो जाएगा

00:13:58जैसे मैंने बुला फिफ्ट चाइल्ड का जो color है

00:14:00वो आप यहाँ पर brown कर देना

00:14:03तो यहाँ पर जो फिफ्ट चाइल्ड रहेगा

00:14:05उसका color यहाँ पर क्या हो जाएगा?

00:14:07brown हो जाएगा, ठीक है?

00:14:08जैसे यहाँ पर brown गुला

00:14:09और उसी के साथ मैं यहाँ पर कहता हूँ

00:14:11कि उसकी जो phone size है

00:14:13वो आप यहाँ पर कर देना जैसे

00:14:1530 pixel, phone size को 30 pixel कर देना

00:14:18तो जैसे यहाँ पर जो 5th child है

00:14:20उसका color brown हो गया

00:14:21और उसकी जो phone size है

00:14:23वो यहाँ पर क्या होगी?

00:14:2430 pixel होगी

00:14:24आप जो भी यहाँ पर अपने numbers पास करोगे

00:14:27वो ही यहाँ पर target हो जागा

00:14:29तो जो 4th child होगा

00:14:31उसके उपर यह अपना property अपला ही हो जाएगी

00:14:34ऐसे ही अपने पास यहाँ पर

00:14:37Ode और Even

00:14:38जैसे मालो मैं यहाँ पर करहा हूँ

00:14:39कि आपको Ode-wise यहाँ पर target करना या फिर

00:14:42Even wise यहाँ पर target करना है

00:14:44अब आपकी list कितनी भी बड़ी हो सकती है

00:14:47अभी तो सिफ साथ item में

00:14:48जैसे मालो database से डेट आ रहे है

00:14:50और list आपकी 100 की हो सकती है

00:14:52और मैं चाहता हूँ कि यहाँ पर जो odd wise जो मेरे पास यहाँ पर list item है

00:14:55उनके उपर एक unique background color रहे और unique रहे वो

00:14:58तो जैसे मालो मैंने यहाँ पर कह दिया odd

00:15:01तो यह odd और even value भी लेता है ठीक है

00:15:04जैसे मैं यहाँ पर एक background color भी देता हूँ इसको

00:15:06और background color में यहाँ पर देता हूँ जैसे

00:15:08इसको यहाँ पर यह गोल्ड वाला background color में यहाँ पर दे दिया

00:15:12तो देखो यहाँ पर जो odd wise जो रहेंगे

00:15:14first, three, five, seven यह सारे क्या है

00:15:17odd है आपके odd number तो odd number पर यह वाला आपका unique जो आपने अपनी

00:15:22यहाँ पर पास करिए और apply करिए अब यह कितनी भी बड़ी लिस्ट हो

00:15:26अगर आप इसको odd increase कर दोगे तो भी यह same चीज़ यहाँ पर apply रहेगी

00:15:30आपने odd increase कर दी अपनी लिस्ट को तो यह हमीशा इस पर लगती रहेगी

00:15:34जो भी odd wise रहेंगे उन पर सब पर यह रहेगा

00:15:36जैसे माला आप even wise अलग करना चाहते हो

00:15:39मैं यहाँ पर कर रहा हूँ कि मेरे पास जो order list है

00:15:41उसके अंदर जो list item है उस पर मैंने लगाया अपना nth child

00:15:45फिर यह parenthesis लेता है फिर उसके बाद curly braces लगा दिये

00:15:49और यहाँ पर मैं लिख देता हूँ जो भी even wise है उसको मैं यहाँ पर target करना चाहता हूँ

00:15:53और उसको जो color है वो आप यहाँ पर कर देना जैसे blue color ठीक है

00:16:00उसके अलावा उसकी जो phone size है वो आप यहाँ पर कर देना 25 pixel

00:16:05और उसके अलावा उसका जो background color है वो आप यहाँ पर कर देना जैसे

00:16:10कोई सा भी करवालो यहाँ पर अपन कहते हैं जैसे यह वाला इसका background color कर देना

00:16:18तो यहाँ पर अब अगर आप देखो कि जो भी even wise मेरे पास यहाँ पर आ रही है

00:16:22जो भी even wise है उन सब के उपर देखो यह वाला color अपना हो रहा है

00:16:26old के उपर अपने अलग से करा और even के उपर अपने अलग से करा

00:16:30तो यह अपने पास क्या होती है अपनी pseudo class अपने यहाँ पर देखी

00:16:35जिसमें hover देखा, NHL देखा, first child देखा, last child देखा ठीक है

00:16:39ठीक है तो यह बात हो गई अपने पास अपनी pseudo class के उपर

00:16:50अगर यहाँ तक की चीज के लिए रहे तो बताओ

00:16:53अगर यहाँ तक की चीज के लिए रहे तो एक बार कमेंट करके बताओ

00:17:05यहाँ तक की चीजे के लिए रहे इसमें कोई डाउट नहीं है

00:17:23सर प्लीज और वाला रिपीट सर एक बार कोड दिखाना प्लीज अभी जो आपने बताया

00:17:43ठीक है

00:17:45यह लो यह देखो ओड और इवन वाला है जो पनिहाँ पर पास कर सकते हैं

00:18:15ठीक है तो यह अपने छूडो क्लास पर डिसकस करा आगे अगर और भी शूडो क्लासे आजाए तो उसमें आपको देख के गवरान नहीं है

00:18:27सरने शायद बढ़ा ही नहीं ठीक है गबराने वाली चीज नहीं है आपको

00:18:31pseudo class पता होनी चीए कि pseudo class होती क्या है ठीक है आगे और भी

00:18:36आजाएगी जैसे मालों अपने एने चाहिल यही देखा ऐसे बहुत सारी आती है

00:18:40अपने पास active भी आती है अपनी link भी आती है visited भी आती है

00:18:44चेक्ड भी आती है अपने पास और अपने पास disable आती है और enable भी आती है

00:18:50यह input वाली होती है चो form के उपर यहाँ पर अपन यूज ले सकते हैं ठीक है

00:18:55यह सारी pseudo classes आगे अपन कहीं न कहीं तो देखते रहेंगे जैसे जिसाती रहेगी

00:19:00जैसे मालों आप required चाते हो कि कोई भी field required हो तो उसके लिए भी यहाँ पर pseudo class आती है

00:19:07एक एक चलो मैं आपको थोड़े बहुत example देता हूँ ताकि आपको clear रहे कि यह यह अपने पास pseudo classes होती है

00:19:17जैसे अपन यहाँ पर अपने यह देखी

00:19:32और कौन सी लिखी थी मैंने यहाँ पर यहाँ पर देख लो focus लिखी थी अब देखो focus क्या होती है

00:19:39अगर अपने को यहाँ पर focus पे कुछ भी दिखाना है तो उसके लिए अपन यूज लेते हैं

00:19:45focus मतलब जब मैं उसके उपर क्लिक करूँ तब अपने को क्या करना है और किसके उपर क्लिक करूँ अपने form के अंदर

00:19:52जैसे मालो मैं यहाँ पर एक input ले लेता हूँ मैं यहाँ पर अपना एक input ले रहा हूँ

00:19:56मैं form नहीं बना रहा हूँ और मैंने अपना text यहाँ पर ले लिया

00:19:59input text मैंने यहाँ पर लिया है तो अगर आप यहाँ पर देखोगे

00:20:03तो यहाँ पर आपके पास आपका एक input text आ रहा है, कोई दिक्कत नहीं हो, सीच के अंदर, यह रहा आपका input text, अभी मैं click कर रहा हूँ, तो सिर्फ इसके उपर एक outline create होके आ रही है, कुछ जैसे click कर रहा हूँ, एक outline create होके आ रही है, अब मैं चाहता हूँ, कि जब मैं इसके �

00:20:33background color जो है, वो आप sky blue कर दो, ठीक है, और जो color है, वो आप यहाँ पर brown कर दो, जब मैं इसके उपर focus करूँ, अब देखो, जैसे ही मैं इसके उपर focus करूँ आप, किसके उपर, इस input के उपर, तो इसका background color क्या हो गया, sky blue हो गया, और जो color है, वो automatically आपको पता चल रहा है, यह

00:21:03ठीक है, ऐसे ही अपने पास, अपना required भी आताँ, जैसे अपने required देखा था, जैसे मैं एक form ही बना लेता हूँ, यहाँ पर एक गाम करो, form में ही देख लेते हैं, मैंने यहाँ पर अपना एक form बनाया, और form के अंदर अपने इस input को ले लिया, ठीक है, फरम के अंदर आपने

00:21:33वो मैं टेक्स्ट ही ले लेता हूं मैंने यहां पर बोला इंपुट और अपने लेता है अपना टेक्स्ट ठीक है या फिर इसी के उपर देख लो नहीं तो अभी इसको अपने को रिक्वाइर करना है तो अपन रिक्वाइर के लिए क्या करेंगे अपना वही रिक्वाइर अ�

00:22:03क्योंगि फोकस हो रहा है तो अब दिगो रिक्वाइट जो आपकी यहां पर आती है इस सूड़ू क्लास वो कैसे लगाते हैं इस इंपुट पर बढ़ानी

00:22:13को, चीक है, यह जो input है, इस input

00:22:15पर ही लगाना चाहता हूं, अब दो

00:22:17input के through target करेंगे, तो आपको button भी

00:22:19यहाँ पर target हो रहा होगा, तो मैं

00:22:21यहाँ पर कहता हूं, input और

00:22:23उसके उपर अपने को यहाँ पर क्या लगानी

00:22:25है अपनी, जो required है

00:22:27वो मैं यहाँ पर लगाना चाहता हूं

00:22:29तो required sudo class में यहाँ पर लगाई

00:22:31अब इसके उपर अपन क्या करना चाहते है

00:22:32जैसे मालो मैं कहा देता हूं कि यह आप border बनाओ

00:22:34और two pixel की बनाओ

00:22:36solid बनाओ और red color की बनाओ

00:22:38जब मैं इसके उपर क्या करूं

00:22:41अपना required यहाँ पर अपना attribute work करेगा

00:22:44तब आपको यहाँ पर क्या करना है

00:22:45यह काम होना चीए है

00:22:47तो चलो check करते है

00:22:49एक बार के लिए इसको refresh कर लो

00:22:51तो देखो यहाँ पर अब भी

00:22:54automatically यहाँ पर create टो क्या रहा है

00:22:56कि यह field आपकी क्या है required है

00:22:58same नहीं लग रहा

00:22:59तो यहाँ पर एक काम कर लो

00:23:00इसको changes कर लो

00:23:01यहाँ पर आप क्या करोगे

00:23:02उसकी जो border radius है

00:23:04उसको change करके 3 pixel यहाँ पर set कर दो

00:23:06border radius भी set कर दो

00:23:07ताकि वो same वैसा ही लगए अपने को

00:23:10तो यहाँ पर देखो अपने को इस तरीके से

00:23:12पता चल रहा है कि यह वाली field अपने पास क्या है

00:23:14अपनी required है

00:23:16ठीक है और अगर मैं इसको submit करूँगा

00:23:18तो वो message अपने पास यहाँ पर आ जाएगा

00:23:19अब यहाँ पर validation करना है

00:23:22तो validation के लिए तो अपन क्या करेंगे अपना

00:23:24वोई use करेंगे अपनी javascript

00:23:26और javascript के थ्रू ही अपन यहाँ पर उसका

00:23:28validation करेंगे

00:23:29ठीक है तो यह अपने पास

00:23:32अपनी कुछ sudo classes

00:23:34आती है जो अपन यहाँ पर देखी

00:23:35ठीक है I hope

00:23:42यहाँ तक की चीज़े आपको clear है

00:23:43ऐसे मैंने और भी

00:23:46sudo classes का नाम लिया था

00:23:48जो अपन आगे देखते रहेंगे

00:23:50जैसे जैसे अपनी use आती रहेगी

00:23:52वैसे वैसे मैं आपको बताता रहूँगा उनके बारे में

00:24:18ठीक है यहाँ तक की चीज़ clear है

00:24:24तो एक बार comment करके बताओ

00:24:25यहाँ तक की चीज़े clear है

00:24:27मतलब sudo class वाला concept आपको clear है

00:24:29कि sudo class को अपन किस तरीके से

00:24:32use करेंगे अगर अपने को sudo class

00:24:34use करनी है तो

00:24:35clear है तो एक बार comment करके बताओ

00:24:38यह सर clear है

00:24:48ठीक है

00:25:16चलो वाई

00:25:17अब अपन आगे आते है

00:25:18अपने pseudo element के उपर

00:25:20कि pseudo element क्या होते है

00:25:22pseudo class आपने देखा

00:25:23pseudo element और pseudo class के syntax में

00:25:25सिफ एक छोटा सा difference है

00:25:27और वो देखो क्या है

00:25:28यहाँ पर अपन बात करते है

00:25:30अपने syntax की

00:25:31कि यहाँ पर अपने पास

00:25:32जो अपना pseudo element आता है

00:25:34pseudo elements आते है

00:25:40वो क्या होते है तो वही अपने पास अपना selector होता है फिर उसके बाद colon अब यहाँ पर colon single नहीं होता है यहाँ पर colon होता है double तो वो आपके pseudo elements होते है और यहाँ पर आती है आपके pseudo elements जो आपके पास है ठीक है वो क्या क्या है वो मैं बताने वाला हूँ फिर उसके बाद property फिर

00:26:10तो वो मैंने अभी पहले बताया था, एक तो अपने पास आता है अपना first line, ठीक है, एक अपने पास यहाँ पर आता है अपना first letter, एक अपने पास यहाँ पर क्या आता है अपना first letter, ऐसे ही अपने पास और कौन-कौन सी आती है before भी आता है अपना, और अपने पास अपना after भी

00:26:40और अपने पास अगर अपने बात करें तो अपना selection भी आता है, ठीक है, और भी बहुत सारी है, जितनी मैं याद है मेरे को अभी वो मैं बता रहा हूँ, बाकी और है, अगर आप explore करना चाहो तो और भी explore कर सकते हो, लेकिन common जो है, जो से जादा use होती है, first letter, first line, selection अपने पास

00:27:10तो अगर अपने को placeholder यूज़ करनी है, तो वो भी अपन यूज़ कर सकते है, ठीक है, तो ये अपने पास अपनी क्या होती है, pseudo elements होते है, जो अपन यहाँ पर यूज़ करते है, अगर अपने को pseudo elements यूज़ करने है, common जो सबसे जादा use आती है, अब देखो, एक नई class बना

00:27:40boiler plate लगा दो यहाँ पर, और अपन समझते है अपने pseudo element को, अब देखो, pseudo element अपन यहाँ पर समझते है, pseudo element यहाँ पर अपने पास किस तरीके से अपन create करते है, और किस तरीके से अपन समझते है इसको, ठीक है, जैसे मालू मैंने यहाँ पर एक paragraph लिया, और उसके अंदर अपन

00:28:10क्योंकि अपन first line और first letter को पहले समझ लेता है अब देखो यहां पर जो मैंने आपको बताया है बागी फाइल से एक बार में close कर देता हूं

00:28:19में फाइल पे ही रह लेते हैं तो यहां पर sudo element जो उसका syntax क्या होता है

00:28:25selector होता है फिर उसके बाद आपका sudo element फिर उसके बाद property और value ठीक है

00:28:29तो यहां पर अपन अपनी वह internal css लगके styling कर लेते हैं paragraph tag को मैं आपर target कर लेता हूँ

00:28:35जिसको मैं यहां पर initially एक color pass कर देता हूँ वो मैं यहां पर कहता हूँ

00:28:38वैसे तो initially black ही रहता है लेकिन मैं brown कह रहा हूँ यहां पर अब भी अगर आप देखोगे तो देखो इसका color पूरा total क्या रहा है

00:28:45पहली अपने पास अपनी जो sudo class है वो कौन सी है अगर अपन यहां पर अपनी पहली sudo class की बात करते है

00:28:52sudo element की sorry तो वो अपने पास first line अब देखो first line की अगाम आती है

00:28:56इस element के अंदर जो first line होगी उसके उपर अपन कुछ भी property लगा सकते है

00:29:02जो अपने यहां पर apply हो जाएगी उसके उपर जैसे मालू मैं इस paragraph टैक पर लगाना चाता हूँ

00:29:08तो मैंने यहां पर double colon लगा है वी sudo element अपने पास और कौन सी property अपनी first line

00:29:13यह मैंने यहां पर लगाई और इसके उपर अपन लगाते है अपनी color property चीक है

00:29:19और color property लगाके मैं यहां पर कहता हूँ कि first line जो है वो blue color की होनी चीए

00:29:23तो यहां पर जो first line होगी वो किस color में रहेगी blue color के अंदर रहने वाली है

00:29:29क्योंकि sudo element आपने यहां पर apply करा है

00:29:31अब आप इस line को कितना ही change कर लो अभी जैसे मेरे को यहां पर पूरी line ही first है

00:29:37अभी के लिए display में अभी बड़े display में देख रहे हो तो पूरी line ही first है

00:29:41जैसे जैसे line change होगी अब देखो जैसे line change हो रही है

00:29:44हमेशा इसकी first line क्या रहेगी यहां पर blue ही रहेगी

00:29:49कितनी ही चोटी कर लो जैसे माला आपने सिर्फ lorem को ही रखा तो lorem यहां पर blue color कर रहेगा

00:29:54बाकी सब यहां पर क्या रहेगे जो अपने default अपने set कर रहेगी अपने paragraph पर

00:29:59तो इसकी हमेशा जो first line है वो हमेशा यहां पर क्या रहेगी

00:30:03ब्लीऊ रहेगी यह अपने पास होती है अपनी pseudo-element ठीक है ओर यह जो

00:30:09pseudo-element आपने लगाई है भी कौन सी लगाई है first line यह सिर्फ block level elements

00:30:15पे ही apply होती है inline की उपर apply नहीं होती rule है यह सिर्फ block level

00:30:20element की उपर ही apply होती है ऐसे ही अगर आपन बात करें first letter की तो first letter

00:30:24लेटर की बात आजाती है जैसे मालों आप यह पूरा लॉरेम वाला कॉंटेंट लिखावा है इसमें सिर्फ आपको इस एल को टार्गेट करना है तो यह आपका क्या हो गया फरस्ट लेटर हो गया इस पैरेग्राफ का तो मैं यहापर कहता हूं पी फिर उसके बाद डबल कॉ

00:30:54लेटर को अपने आपको टार्गेट करा और यह भी ब्लॉक लेवल एलिमेंट पे ही अप्लाई हूरती है तो अपना जो सूरू एलिमेंट है उसके अंदर अपने पास

00:31:24जो अपना first line है और जो first letter है ये सिर्फ अपने block level element की उपर ही apply होती है ठीक है फिर उसके बाद next अगर अपन बात करें before और after important है आगे बहुत काम आएगी ठीक है कई animations के अंदर कई transitions अपन लगाएंगे ठीक है

00:31:43अब देखो before और after property काम आएगी अब देखो before और after property क्या होती है देखो समझो इसको अपने को किसी भी element पे before या after में कुछ भी content अगर अपने को लगाना है तो वहाँ पर अपन इसको use करते है जैसे मालू मैंने यहाँ पर catch one tag लिया और मैंने बोला देवानशू सर ठीक है और �

00:32:13इससे पहले कोई content लगाना है मैं चाहता हूं कि यह जो देवानशू सर लिखावा रहा है इससे पहले मेरको यहाँ पर कोई content लगाना है तो अपन property लगाएंगे अपनी कौन सी before ठीक है जैसे मालू मैं emoji add करना चाहता हूं इससे पहले और आप emoji को target नहीं कर सकते तो मैं यहा

00:32:43और content के अंदर आपको जो भी emoji लगाना है वो emoji पास कर तो जैसे मालू मैं यहाँ पर यह वाला emoji यहाँ पर पास कर देता हूं ठीक है तो इस h1 tag के before में यह वाला emoji अपने पास यहाँ पर क्या हो जाएगा apply हो जाएगा ठीक है अब यहाँ पर अगर आप target कर रहे हूं तो आ�

00:33:13ठीक है तो यहाँ जो आपने लगा है वो आपने अपने tag के अंदर पास करा आप उसको target कर पा रहे हूं लेकिन मैं इसको target नहीं कर सकता क्योंकि यह आपके content के यह जो आपने लगाई है अपने pseudo element के थ्रू लगाई है और pseudo element के थ्रू अगर अपने अपना कोई content पास करते है

00:33:43कि मेरा जो h1 tag है उसके ही after में मेरे को यहाँ पर कोई लगाना है ठीक है मैंने बुला कि content और content के अंदर अपने यहाँ पर पास कर दिया अपना कोई भी emoji ठीक है जैसे यह वाला emoji मैंने यहाँ पर पास कर दिया यह तो मैं एक्जांपल के लिए बताता है इसको हटा देता हूं

00:34:13है अब आप लोगी sir use का आती है यूज आती है यह जैसे मालो मैं किसी website के उपर आता हूं कोई भी government job की website है क्या अपने पास

00:34:22ठीक है जैसे अपन इस पर आते है और इसने login registration दे रखाया क्या

00:34:37जैसे मैं इसके registration पर आता हूं ठीक है अब देखो यहाँ पर लिखावा register as और यहाँ पर आप इस star को target नहीं कर पा रहे है क्यों नहीं कर पा रहे है target क्योंकि यहाँ पर इसमें जो अपने पास इसने जो level है उसके उपर क्या लगा रखा है

00:35:02pseudo element लगा रहा है और pseudo element में कौन सा लगा रहा है after वाला और after में क्या पास कर रहा है एक star पास कर रहा है जिसको अपन यहाँ पर target नहीं कर पा रहा है मैं सिर्फ register as को ही copy कर पा रहा हूं

00:35:13समझ पार हूं क्या कर रहा हूं जैसे मालों मैं login के उपर आता हूं तो देखो login में यह बोला एंटर security code और इसके आगे जो star उसको मैं आपर target नहीं कर पा रहा हूं जैसे अपन एक input लेते उसमें समझते हैं मैं यहाँ पर आता हूं और यहाँ पर अपने एक input लिया

00:35:28और colon में यहाँ पर कहते हूं अपना टेक्स्ट चीक है और इससे पहले ही मैंने यहाँ पर कहले लिया अपना एक label ले लिया और उसके अंदर अपन यहाँ पर कहते हैं जैसे

00:35:38first name चीक है तो अब भी आप यहाँ पर देखोगे तो आपके बास एक input आ रहा है जिसमें क्या लिगाँ अब इस first name को मैं को यहाँ पर बताना है कि यह फिल्ट required है जैसे वहाँ पर भी क्या बता रहा है यह फिल्ट required है enter security code और यह star बनावा इसका मतलब ही required है आपको यहाँ �

00:36:08तो यहाँ पर अपने को क्या करना है अपना आफ्टर लगाना है और नहींग लगा दिया और content के अंदर आपको क्या करना है score ही तो लगना है तो मेने यहाँ पर फिल्ट बदास नहीं कर सकते

00:36:25चीक है color change करना है तो color property लगा दू इसका color भी change हो जाएगा color मैंने यहाँ पर गया रेड कर देना तो यहाँ पर इसका color क्या हो जाएगा red हो जाएगा यहाँ पर इसको target नहीं कर पा रहा है चीक है तो यह अपने पास अपना pseudo element होता है

00:36:40चीक है तो यह अपने पास हो गया अपना pseudo element चीक है before और after के अंदर अपन अपना content यहाँ पर पास कर सकते हैं जिसको अभी अपन target नहीं कर सकते हैं उसके बाद next अपन आगे चलते हैं इसी के अंदर यहाँ तक की चीज़ चीज़ों clear है

00:37:07है ठीक है है एच वन paragraph टायगी सब चीज़े देखी

00:37:12कौन से बच गई अब अपने पास selection अब देखो selection क्या काम आती है selection काम आती है अब भी आप अपने content को यहाँ पर अगर select करो जैसे मैंने यहाँ पर content को select करा

00:37:28तो तो तो selection में जो selection tool है वो क्या काम कर रहा है उसका background color इसने पहले से set कर रखा है blue type में जो भी background color और color इसने white कर रखा है लेकिन अगर मैं change करना चाता हूँ तो आप अपने selection tool को भी change कर सकते हूँ

00:37:40कैसे मैं यहाँ पर बोलूँगा कि मेरा जो body है उसके अंदर पूरे में ही लगा दो या फिर आप paragraph tag में लगाना चाहते हूँ जहां पर भी आप लगाना चाहते हूँ जैसे मैं body के अंदर ही लगा दो और मैंने अपनी sudo element यहाँ पर use करा और उसमें अपने को क्या करना है �

00:38:10जैसे मैं यहाँ पर देखो select करूँगा तो इसका background color क्या आ रहा है black आ रहा है और जो color है वो यहाँ पर क्या हो गया white हो गया कुछ भी आप changes कर सकते हो selection के उपर आपको क्या changes करवाने है वो changes मैं यहाँ पर कर दिये तो यह आपका selection tool होता है जिसको अपन यहाँ पर use ले सकत

00:38:40कर दो कर सकते हैं कर सकते हैं कर सकते हैं यहाँ कुछ भी content अपन यहाँ पर पास कर सकते

00:39:04यूरल के तुरू आप image भी पास कर सकते हो कुछ भी content अपन यहाँ पास कर सकते हैं जिसको अपने को select नहीं करवाना पी को करें इस पर होवर प्रोपर्टी को कैसे use करेंगे किस के उपर use करने है बताओ अधित्ते करें एक बार फिर समझा दो star वाला pseudo element कृष्णा करें सरी �

00:39:34सूडो क्लास है सूडो element नहीं है इशा करें सर कोड दिखाओ एक बार और speed आज तेज है सर कोड दिखाओ एक बार प्लीज चाहिए

00:39:44तेज है क्या आज मेरी ठीक है ठीक है दीरे चलते है थोड़ा सा दीरे चलते है वापस बताता हूं मैं देखो सूडो element तो बड़ाई easy था सूडो class तो easy था सूडो element क्या सूडो class तो बड़ाई easy था

00:39:59होवर है easily आपको जिस पर होवर करना है प्रोपर्टी चेंज कर दो फर्स चाहिल्ड easy है लास चाहिल एनेच चाहिल फोकस चीक है इसी के अंदर अपने और भी देखा था जैसे required यह सब चीज़े देखी ऐसे ही अगर अपन सूडो element की बात करते तो उसमें before और after अपने यहा

00:40:29मैं इन दोनों emoji को target नहीं कर पादा ठीक है और मैंने अभी example दिया था जैसे कोई भी government job की website अपने आपर देखी थी जैसे मैं इसके उपर आता हूं और यह मैंने example दिया है कि यहां पर अपन उसको देख सकते है कि अपनी जो property है वो कहां पर apply हो रही है यही खोली थी कहा पह

00:40:59register as लिखावा है उसके आगे यहां पर एक star बनावा रहा है तो वो star जो आ रहा है उसको पर यहां पर target नहीं कर सकते हैं तो वही same काम अपने को करना है तो यहां पर मैंने label लिया और उस label को यहां पर target करके उसके उपर after अपने क्या लगा दी अपनी pseudo element और content के अंदर मैंने star

00:41:29पाऊगे तो यहां पर तो यहां पर अपने star यूज़ ले रहे color आप change करना चाते है उसका color भी change कर सकते हो जैसे इसका star का color यहां पर red हो गया तो यह अपने पास अपनी pseudo element होती है before और after selection क्या आती है selection अगर अपने को select करते तब अपने को अगर उसकी properties change करनी है जैसे मैंने

00:41:59color यहां पर change कर दिया ठीक है phone size भी अपने अगर change करेंगे थोड़ी सी करके रेख लेते हैं यहां कि करते नहीं है सा काम ठीक है मैं यहां पर phone sizes की change करता हूं और मैं कहता हूं 30 pixel कर देना selection पर phone sizes की change कर देना ठीक है जैसे ही है यहां पर select करूंगा phone size होगी नहीं इस पर use क्य�

00:42:29और इस element को मैं आपर target कर लेता हूँ paragraph tag को ही ठीक है और इस paragraph tag के उपर ही अपने अपनी sudo element लगा रखी है

00:42:39यहाँ पर तो यह कुछ पता ही नहीं है इसमें

00:42:59लेकिन अपने इसमें selection पर phone size चेन नहीं कर पाएंगे क्योंकि display की property चेंज होगी वहाँ block level element रहे है अपना यह चीक है तो यह बात होगी अपने पास किस चीच की अपने selection की ऐसे ही अगर आप देखोगे तो अपने पास अपना place holder भी होता है

00:43:25place holder को change करना है तो उसके लिए है यह तो जैसे यह input है अब इस input को अगर आप check करोगे तो अभी इसके अंदर कोई place holder नहीं है तो place holder लिग दो यहाँ पर आप क्या बोलोगे place holder और उसमें आप बोलोगे

00:43:39enter your name

00:43:42enter your name यह मैंने यहाँ पर कहा ठीक है यह place holder अपने यहाँ पर लिग दिया तो वो place holder अपने को यहाँ पर show होगा ठीक है अभी

00:43:56इनिशली जो मैंदा place holder आ रहा है उसके अंदर यहाँ पर जो color है वो gray color अपने को दिखाए दे रहा है color change करना है या फिर इसका background color लगाना है background लगाते नहीं है जैसे मालो color change करना है इस place holder का तो आप बोलोगे कि आपका जो input है उसको तो मैंने यहाँ पर लिग दिया फिर उस

00:44:26चेंज करके आपने बोला green कर देना इसका color तो यहाँ पर आपने उसका color green कर दिया तो जो place holder है उसका color green हो जाएगा बस यह place holder का color green हो गया जिससे आप इस पर कुछ लिखोगे तो वो automatically change हो जाएगा आप focus पर change करना चाते हो color तो focus पर भी कर सकते हो आप बोलोगे कि जो input है उ

00:44:56तो देखो अब यह focus करा हूं focus पर चेंज हो चुका है आपने आपर color लिखा तो वह यह color आ रहा है तो इस तरीके से अपन कस्टमाईज कर सकते हैं इन चीजों को यह दो अपने अपने selector देखे sudo class और sudo element सिर्फ sudo class और sudo element में difference क्या था

00:45:13sudo class के अंदर अपन colon करके लेते थे और sudo element के अंदर अपन double colon करके लेते हैं बस यही तो difference है

00:45:43sudo element के property को hover करने के बाद property change करना चाहता हूँ क्या करना चाहते हूँ यह कौन सी नई कुरापाती दिमाग लगा रहे है आप

00:45:57होवर करने पर तो automatically property change हो जाती ही फिर क्या property change करोगे उसकी

00:46:04होवर करने पर वापस फिर कैसे property change करोगे बताओ मेरे को

00:46:10समझ नहीं पारा मैं आपके यह

00:46:14question

00:46:16ठीक है जैसे मालो और अपने पास pseudo element कौन-कौन से देखे अपने फॉर्स

00:46:37लाइन फॉर्स लेटर बिफूर आफ्टर सेलेक्शन ऐसे अब अब यह आता है अब देखो marker क्या काम आता है

00:46:46marker को भी समझ लो क्योंकि अपने लिस्ट के उपर discuss तो कराई यह तो marker पर बिगर लेते हैं अपने पास अपनी

00:46:51इन अनौडर लिस्ट आती है और उसके अंदर क्या दे लिस्ट आइटम जिस्ट एम और लिस्ट आइटम के अंदर परий ऀस्ट आूर ने पर वीnity दो ऑभी के

00:47:03लिए और वो मैं यहां पर कहता हूं देवान शू तो यहां पर अपने पास अपने लिस्ट आइटम यहां पर अपने को शू हो जाएंगे तो यहां पर लिस्ट आइटम अपने वासे आ रहे हैं अब यह जो बुलिटियन साइंस आ रहे हैं इनको मैं यहां पर चेंज करना चा

00:47:33जो list item है उसके उपर

00:47:35pseudo element कौन सी है? Marker

00:47:37Marker मैंने यहापर लगाई

00:47:39और उसके अंदर मैंने यहापर बोला जो color है

00:47:41वो आप यहाँ पर क्या कर देना?

00:47:43Red कर देना, ठीक है?

00:47:45जो color है वो क्या कर देना? Red कर देना

00:47:47तो देखो यहाँ पर यह जो इनका color है

00:47:49वो Red हो गया है, ठीक है?

00:47:51Phone size भी change कर सकते हूँ, जैसे मालों मैं आपर

00:47:53phone size change करता हूँ, जैने phone size

00:47:55change करके यहाँ पर

00:47:5710 pixel तो ज़्यादा हो जाएगी, 5 pixel करता हो भी के लिए

00:48:005 pixel करके देखो एक बार

00:48:01तो देखो 5 pixel तो छूटी हो गए बहुत

00:48:0415 करो

00:48:06ज्यादा changes नहीं दिख रहे है

00:48:1125 करके देख लो

00:48:13यह लो, ठीक है? तो यह अपने पास अपनी

00:48:20marker property होती है, अगर अपने को यहाँ पर

00:48:23marker property यूज करने है तो

00:48:25ठीक है?

00:48:36और भी आती है property pseudo element की

00:48:40एक file करके आती है, कुछ याद नहीं आ रही मिरको

00:48:44अपने को उसको करके ही देख लेते है

00:48:46input file के लिए आती है, वो मिरको

00:48:48याद नहीं है proper लेकिन

00:48:49उसका पूरा एक बार अपन देख लेते हैं

00:48:52जैसे मैंने input file लिया, ठीक है?

00:48:53इस input file पे लगाना है मिरको

00:48:55अब भी अगर आप input file देखोगे अपना

00:48:58तो वो कैसे आ रहा है? इस तरीके से

00:48:59no file select इस तरीके से आपको

00:49:01यहाँ पर दिखा रहा है, ठीक है? और

00:49:03यहाँ से आप file अपनी select कर सकते हो

00:49:05ठीक है? अब यहाँ पर

00:49:08मैं सबसे पहले क्या करूँगा?

00:49:10इस input को target करूँगा

00:49:12यह जो मेरा file वाला है, ठीक है?

00:49:14तो इसको मैं आपर target कर लेता हूँ

00:49:15इससे पहले जो input है उनको एक बार के लिए

00:49:18comment कर दो और जो आपने

00:49:19CSS लिख रही input के लिए

00:49:22उनको भी comment कर दो क्योंकि वो

00:49:23overlap हो जाएगी, ठीक है?

00:49:27इस input file के लिए लगाना चाता हूँ मैं

00:49:29तो मैं यह आपर बोलता हूँ अपना

00:49:30input double colon और file करके ही आती है

00:49:34file selector button

00:49:36file selector button अपने पास यहाँ पर अपनी

00:49:39यह pseudo element आता है

00:49:41ठीक है?

00:49:43file selector button

00:49:45ठीक है? अब इसके उपर जैसे मालो मैंने बोला

00:49:49कि आप background color यहाँ पर इसका change करना

00:49:52और background color चेंज करके

00:49:53जैसे मालो मैंने बोला brown कर देना

00:49:55एक बार के लिए अपन चेक करते हैं

00:49:57तो दोको इसका background color यहाँ पर क्या हो गया?

00:49:59brown हो गया, ठीक है? जैसे मैं यहाँ पर

00:50:01कहता हूँ कि आप इसका जो color है

00:50:03वो भी change कर देना

00:50:19चेंज हो के pointer हो जाएगा

00:50:20तो यहाँ पर इस तरीके से अपने उस button को change कर दिया

00:50:23अगर अपने को इस button को change करना है

00:50:25तो यह अपने पास होता है

00:50:27अपना pseudo element का ही

00:50:30ठीक है? क्या होता है?

00:50:31input selector button करके

00:50:49यहाँ तक की change के लिए रहा है

00:50:55आप सभी को

00:50:56तो आज अपने जो discuss करा

00:50:59वो अपने pseudo class और pseudo element selector के उपर discuss करा है

00:51:19पीकू ने कुछ बेजा है

00:51:27LI के अंदर anchor tag उस पर after property लगाई ठीक है

00:51:31फिर LI के अंदर anchor tag पर

00:51:33hover फिर after यहाँ पर double colon आएगा यह गलत है

00:51:36यह syntax का मतलब

00:51:38लास्ट वाले input का full code दिखाना

00:51:43लास्ट वाले input का full code यह है

00:51:45यहाँ पर सिफ मैंने background color लगा है

00:51:47जैसे मालब पैडिंग भी लगा दो इसके पर तो

00:51:49पैडिंग से तोड़ा सा और अच्छा हो जाएगा

00:51:51जैसे मैं चाहता हूं कि यहाँ मेरा

00:51:54input आ रहा है इसके पर

00:51:55मैं अपनी पैडिंग भी यहाँ पर apply कर दो

00:51:58तो जैसे मैं वह भी apply कर जाता हूं 5 पिक्सल

00:52:00और 10 पिक्सल की यह मैंने पैडिंग अप्लाइ कर दी 5 टॉप और बॉटम सेकेंड लेप्ट और राइट पन अपन अपन अपने अपने अप्लाइ कर दी तो इस तरीके से वह बटन यहाँ पर अपन चेंज कर सकते हैं ठीक है बॉड़र एडियस चेंज कर लो यहाँ पर ब�

00:52:30दीरे आपको समझ में आ रहा होगा कि अपन यूआई को किस तरीके से इनहेंस कर सकते हैं किस तरीके से चेंज कर सकते हैं बस बात यह है कि जितनी भी प्रोपर्टीज अपन देख रहे हैं वह आपकी क्लिक होना ज़रूरी है उस टाइम जब आपन अपना कोई भी यूजर �

00:53:00तो एक दिन पहले मैं अनाउंस करूँगा कि आपको सब चीज़े एक बार रिवाइस करनी है तब आप एक बार रिवाइस कर ले ना ताकि प्रोजेक्ट में आपको कोई दिक्कत ना आए किसी को

00:53:11पीकू कह रहे है कि एक बार कोड भेजो आप अगर आपने कहीं यूट्यूब पे देखा कोई दिक्कत नहीं यूट्यूब पे देखा बहुत अच्छी बात है

00:53:38लेकिन इसका एक बार कोड भेजो पूरा ताकि मैं उस कोड को देख के आपको बताऊं कि क्या हो रहा है यह सिर्फ आपने बताया लिस्ट आइटम है जिसमें आपने यह लगा दी इसका कोड पूरा भेजो ताकि मैं उसको कॉपी करके यहाँ पर समझा दू कि क्या हुआ है

00:54:08रितेश करें कि हेलो सर मेरा कोड लिखा हुआ, कंट्रोल प्लस ए हो गया, ठीक है, और सारा कोड मेरे एक दूसरे वर्ड से सारा कट गया, क्या उसे लाए जा सकता है, अगर इरेज करके सेव कर दिया तो वो तो कोड वापस नहीं आएगा, गिटप पे अगर ट्रैक करके रख

00:54:38अधित्य करें सबको अलग-अलग प्रोजेक्ट करना है क्या सार, यस बिल्कुल वो तो मैं आपको टास्क दूँगा, लेकिन अपन जो क्लास में अपन बनाएंगे, वो मैं बनवाऊंगा, ठीक है, सबका अलग-अलग नहीं है, वो एक कोवमन होगा, जो सबको बना नहीं ह

00:55:08यूनिट्स यहाँ पर रिमेनिंग रही है, जिस पर अपन डिस्केशन करेंगे, ठीक है, फिर अपन एडवांस CSS पर भी आएंगे, यह तो अभी बेसी की है, एडवांस CSS नहीं यहीं है,

00:55:22सेव नहीं है सर, सेव नहीं है तो वो तो डिलिट होगी न, अगर सेव नहीं है तो, अगर आपने फाइल को सेव नहीं कर रखी, तो तो डिलिट होगी होगी फाइल,

00:55:44Ctrl प्लस Z करो

00:55:50अच्छा वैसे बता रहे हो गया

00:55:54आपने अगर अपना VS Code बंद नहीं करा

00:55:57अब भी कराई ये काम

00:55:58तो तो Ctrl Z कर दो

00:55:59वापस undo हो जाएगी सारी चीज़े

00:56:01ये तो basic shortcut से याद होने चीज़े

00:56:06पता होने चीज़े

00:56:07Ctrl C से copy होता है

00:56:08Ctrl V से paste होता है

00:56:10Ctrl Z से undo होती चीज़े

00:56:12Ctrl A से select होता है

00:56:14जो भी पूरा select करना है

00:56:16और क्या क्या आते हैं

00:56:20प्रस यही है

00:56:21ठीक है

00:56:28छलो मैं आपको attendance के points भी बताता हूँ

00:56:31attendance के point 1 के अंदर आपको mention करना है

00:56:34यहाँ पर over

00:56:35attendance के point 1 के अंदर आपको mention करना है

00:56:38over

00:56:38Ctrl प्लेस वाइ रीडू

00:56:42Yes, Ctrl प्लेस वाइ रीडू

00:56:44लेकिन Ctrl Z जादा यूज आता है

00:56:47बहुत सारे shortcuts

00:56:49लेकिन common जो जादा यूज आते हों बता रहा हूँ है

00:56:51सर मैंने एक प्रोजेक्ट बनाया है क्या बनाया है

00:57:10प्रोजेक्ट के अंदर

00:57:17फूल स्क्रीन चला के देखते क्या बनाया है

00:57:40अच्छा है अच्छा बनाया है

00:57:56किस पर बनाया है यह HTML और CSS

00:58:00या फिर आपने इसमें bootstrap भी यूज करी है

00:58:03मेरे साब से bootstrap भी आप यूज कर रहे हो

00:58:06यह तो टैल्विन यूज कर रहे है तू मेरे साब से

00:58:08इतना फास फास क्यों बना रगा है तो इसको

00:58:13अच्छा है project अच्छा है

00:58:15नाइस

00:58:17ठीके यह attendance का point बने जो गने आभी आपको बता

00:58:30attendance का point 2 भी मैं आपको बताता हूँ

00:58:32आज की attendance का point 2 क्या है

00:58:34attendance के point 2 के अंदर आपको mention करना है

00:58:38क्या क्या पढ़ लिया आपको बताता है

00:58:40क्या क्या क्या क्या पढ़ लिया और

00:58:45क्या क्या पढ़ लिया आप ने

00:58:48और पढ़ लिया और

00:58:52मैं को इसा लग रहा भून नहीं किया था तो गई क्या

00:58:57focus कर देना mention आप

00:59:00attendance के point 2 के अंदर आप यहां पर focus mention कर देना

00:59:07attendance के point 2 के अंदर आपको क्या mention करना है

00:59:11focus आपको यहां पर mention करना है

00:59:13यही attendance का point 2 है

00:59:17एला आपको कि अपको को मैं अभू एभूप

00:59:31यहां आपको करना है

00:59:36क्या आप

00:59:47ठीक है

00:59:54reply किस चीज का reply

00:59:57button के बीच में जो content है

00:59:59उसको change कैसे करना है

01:00:01button के बीच में content है

01:00:03वो तो directly property से change होगा ना

01:00:05यहाँ पर देखो change हो गया

01:00:06यहाँ पर मैंने color property लगाई

01:00:08यह change करना है यह हटाना है

01:00:10no file chosen

01:00:11जो लिखावा ना

01:00:13तो यह अगर हटाना है

01:00:15तो यह कैसे हटाओगे no file choose

01:00:17अगर इसको हटाना है तो इसको कैसे हटाओगे

01:00:19इसको अभी नहीं हटा सकते आप

01:00:21इसमें अपने को आगे display properties अपन पढ़ेंगे

01:00:24तब हटा सकते है अपन

01:00:25क्योंकि अपने वास hidden properties यह properties आती है

01:00:28उसके through मैं आपको बताओगा कि आप इसको कैसे हटा सकते हो

01:00:30अभी के लिए इसके साथ ही काम चलाओ

01:00:32इसको अगर हटाना है तो किस तरीके से हटाएंगे वो मैं आगे बताओगा

01:00:36अभी option नहीं है इसको हटाने का

01:00:38क्योंकि सारी properties नहीं देखिए अपने

01:00:40यह सिर्फ अपने देखिए अपनी जो यहाँ पर

01:00:43pseudo element की properties से अपन काम कर सकते हैं

01:00:47यह अपन हटाना देखेंगे आगे

01:00:53क्योंकि इसमें hidden यह property अपन लगाएंगे उसके through अपन इसको हटागे देखेंगे

01:00:57आगे जब अपन display properties पढ़ ले तब मेंको एक बार याद दिला देना मैं बता दूँआ कैसे हटाते हैं

01:01:03नहीं तो कहीं न कहीं तो यह काम आई जाएगा हटाने का

01:01:06आपर आपको अटोमेटिकली पता चल जाएगा

01:01:08ठीक है

01:01:14ओके आज की क्लास इतनी रखते हैं मिलते हैं फिर अपने नेक्स क्लास के अंदर

01:01:19थैंक्यू सो मज़ गाइस

01:01:20बाइबा अवरिवन और टेक केर रोल सभी अपना ध्यान रखो

01:01:23ओनली इंपूट का देखना है

01:01:26विदाउट सी एसस सर वन मिनिट प्लीज

01:01:28क्या देखना है आपको

01:01:30विदाउट सी एसस

01:01:35यह देखो यह इंपूट अपने लिखा

01:01:39यह रही अपनी सी एसस

01:01:41यह रही अपने पहले वाले इंपूट

01:01:43ठीक है इतना सा काम करा है

01:01:45देख लेना एक बार प्लास को वापस से

01:01:48जब रिकॉर्डिंग आ जाएगी तब

01:01:50ठीक है ओके बाइबाइबरिवन

Be the first to comment

Add your comment

🎨 Learn CSS Pseudo Classes & Elements | Hover, Focus, Before, After Explained

Category

Transcript

Be the first to comment

Recommended