.active क्लास से करंट पेज इंडिकेटर नेविगेशन बार में वर्तमान पेज को दर्शाने के लिए एक .active क्लास का उपयोग किया जाता है, जिसे सर्वर-साइड या जावास्क्रिप्ट द्वारा डायनामिकली असाइन किया जाता है। उदाहरण <!DOCTYPE html> <html> <head> <style> ul { list-style-t

वर्टिकल नेवबार का बुनियादी ढांचा वर्टिकल नेविगेशन बार बनाने के लिए <ul> और <li> का उपयोग करें, लिस्ट स्टाइल हटाएं, और लिंक्स को display: block बनाएं ताकि पूरा एरिया क्लिकेबल हो। उदाहरण <!DOCTYPE html> <html> <head> <style> ul { list-style-type

border-top शॉर्टहैंड प्रॉपर्टी border-top शॉर्टहैंड प्रॉपर्टी एक ही घोषणा में टॉप बॉर्डर की चौड़ाई (border-top-width), स्टाइल (border-top-style), और रंग (border-top-color) सेट करती है। सिंटैक्स border-top: <width> <style> <color>; उदाहरण <!DOCTYPE html> <html> <h

background-attachment: fixed का उपयोग background-attachment: fixed प्रॉपर्टी बैकग्राउंड इमेज को व्यूपोर्ट के सापेक्ष फिक्स कर देती है, ताकि स्क्रॉल करने पर इमेज न स्क्रोल हो (पैरालैक्स इफेक्ट)। उदाहरण <!DOCTYPE html> <html> <head> <style> body { backgroun

नेवबार पर बॉर्डर लगाना नेविगेशन बार (<ul>) के चारों ओर बॉर्डर जोड़ने के लिए border प्रॉपर्टी को <ul> पर लागू करें। शॉर्टहैंड ul { border: 2px solid blue; } पूर्ण उदाहरण <!DOCTYPE html> <html> <head> <style> ul { list-style-type: none;

:read-write सेलेक्टर का उपयोग (रीड-ओनली नहीं) :read-write सेलेक्टर उन एलिमेंट्स को सिलेक्ट करता है जिनमें readonly एट्रिब्यूट **नहीं** होता (यानी एडिटेबल हैं)। यह :read-only का विपरीत है। उदाहरण <!DOCTYPE html> <html> <head> <style> input:read-write { bac

:required सेलेक्टर का उद्देश्य :required सेलेक्टर अनिवार्य फॉर्म फील्ड्स को स्टाइल करके यूजर को आवश्यक फील्ड्स की पहचान कराने में मदद करता है। उदाहरण <!DOCTYPE html> <html> <head> <style> input:required { background-color: orange; } </style&g

position: sticky का उपयोग position: sticky एक हाइब्रिड पोजिशनिंग है जो एलिमेंट को नॉर्मल फ्लो में रखता है जब तक कि यह स्क्रॉल के दौरान निर्दिष्ट थ्रेशोल्ड (top, bottom, आदि) तक नहीं पहुंच जाता, फिर यह fixed की तरह व्यवहार करता है (व्यूपोर्ट के सापेक्ष चिपक जाता है)। उदाहरण: स्टिकी हेडर/नेवबार <!

:required सेलेक्टर का उपयोग :required सेलेक्टर उन फॉर्म एलिमेंट्स को सिलेक्ट करता है जिनमें required एट्रिब्यूट होता है। यह अनिवार्य फील्ड्स को विज़ुअली हाइलाइट करने के लिए उपयोगी है। उदाहरण <!DOCTYPE html> <html> <head> <style> input:required { backgroun

:root सेलेक्टर का उद्देश्य :root सेलेक्टर डॉक्यूमेंट के रूट एलिमेंट को टार्गेट करता है। यह CSS कस्टम प्रॉपर्टीज (वेरिएबल्स) के लिए ग्लोबल स्कोप प्रदान करता है। उदाहरण <!DOCTYPE html> <html> <head> <style> :root { background: blue; color: white;

:root सेलेक्टर का उपयोग :root सेलेक्टर डॉक्यूमेंट के रूट एलिमेंट (HTML में <html>) को सिलेक्ट करता है। इसकी स्पेसिफिसिटी html टाइप सेलेक्टर से अधिक होती है। यह आमतौर पर CSS कस्टम प्रॉपर्टीज (CSS वेरिएबल्स) परिभाषित करने के लिए उपयोग किया जाता है। उदाहरण <!DOCTYPE html> <html> &l

:target सेलेक्टर का उद्देश्य :target सेलेक्टर URL फ्रैगमेंट (हैश) से मेल खाने वाले ID वाले एलिमेंट को हाइलाइट करता है, जिससे सिंगल-पेज नेविगेशन या FAQ सेक्शन में विज़ुअल फोकस मिलता है। उदाहरण <!DOCTYPE html> <html> <head> <style> :target { border: 2px sol

:not() सेलेक्टर का व्यावहारिक उपयोग :not(selector) नेगेशन सेलेक्टर का उपयोग करके आप निर्दिष्ट सेलेक्टर को छोड़कर बाकी सभी एलिमेंट्स को स्टाइल कर सकते हैं। उदाहरण <!DOCTYPE html> <html> <head> <style> p { color: red; } :not(p) { color: blue; } </style

:target सेलेक्टर का उपयोग :target सेलेक्टर उस एलिमेंट को स्टाइल करता है जिसका ID वर्तमान URL के फ्रैगमेंट आइडेंटिफायर (हैश #id) से मेल खाता है। यह पेज के भीतर नेविगेशन हाइलाइटिंग के लिए उपयोगी है। उदाहरण <!DOCTYPE html> <html> <head> <style> :target { bor

:valid सेलेक्टर का उपयोग :valid सेलेक्टर उन फॉर्म एलिमेंट्स को सिलेक्ट करता है जिनकी वैल्यू उनके टाइप और कंस्ट्रेंट्स के अनुसार **मान्य (वैध)** है। यह सफल वैलिडेशन फीडबैक के लिए उपयोगी है। उदाहरण <!DOCTYPE html> <html> <head> <style> input:valid { backgro

:only-of-type सेलेक्टर का उद्देश्य :only-of-type सेलेक्टर पैरेंट के अंदर अपने टाइप के इकलौते एलिमेंट को टार्गेट करता है। यह :only-child से कम सख्त है क्योंकि यह अन्य टाइप के सिबलिंग्स की अनुमति देता है। उदाहरण <!DOCTYPE html> <html> <head> <style> p:only-of-type

:only-of-type सेलेक्टर का उपयोग :only-of-type सेलेक्टर उस एलिमेंट को सिलेक्ट करता है जो अपने पैरेंट के अंदर **अपने टाइप का एकमात्र** एलिमेंट हो। पैरेंट में अन्य टाइप के चाइल्ड्स हो सकते हैं। उदाहरण <!DOCTYPE html> <html> <head> <style> p:only-of-type { ba

:only-child सेलेक्टर का उद्देश्य :only-child सेलेक्टर उस एलिमेंट को टार्गेट करता है जो अपने पैरेंट का **एकमात्र चाइल्ड** हो (किसी भी टाइप का कोई अन्य चाइल्ड न हो)। उदाहरण <!DOCTYPE html> <html> <head> <style> p:only-child { background: orange; }

:optional सेलेक्टर का उद्देश्य :optional सेलेक्टर फॉर्म में वैकल्पिक (नॉन-रिक्वायर्ड) फील्ड्स को पहचानने और स्टाइल करने में मदद करता है, ताकि यूजर समझ सके कौन से फील्ड भरने अनिवार्य नहीं हैं। उदाहरण <!DOCTYPE html> <html> <head> <style> input:optional { b

:optional सेलेक्टर का उपयोग :optional सेलेक्टर उन <input>, <select>, <textarea> एलिमेंट्स को सिलेक्ट करता है जिनमें required एट्रिब्यूट **नहीं** होता। यह वैकल्पिक फील्ड्स को विज़ुअली अलग करने के लिए उपयोगी है। उदाहरण <!DOCTYPE html> <html> <head> <style&