:out-of-range सेलेक्टर का व्यावहारिक उदाहरण यह आलेख दिखाता है कि कैसे min/max रेंज से बाहर की वैल्यू वाले नंबर इनपुट को स्टाइल किया जाए। उदाहरण <!DOCTYPE html> <html> <head> <style> input:out-of-range { border: 3px dashed orange; background: yello

:out-of-range सेलेक्टर का उपयोग :out-of-range सेलेक्टर उन इनपुट एलिमेंट्स को सिलेक्ट करता है जिनकी वैल्यू min और max एट्रिब्यूट्स द्वारा परिभाषित रेंज के **बाहर** होती है। उदाहरण <!DOCTYPE html> <html> <head> <style> input:out-of-range { border: 3px dashe

:read-only सेलेक्टर का उद्देश्य :read-only सेलेक्टर नॉन-एडिटेबल एलिमेंट्स को स्टाइल करने के लिए उपयोग किया जाता है, ताकि यूजर को पता चले कि यह फील्ड बदला नहीं जा सकता। उदाहरण <!DOCTYPE html> <html> <head> <style> input:read-only { background-color: blue;

:read-only सेलेक्टर का उपयोग :read-only सेलेक्टर उन एलिमेंट्स को सिलेक्ट करता है जो **यूजर द्वारा एडिट नहीं किए जा सकते**। इसमें शामिल हैं: readonly एट्रिब्यूट वाले <input>/<textarea> disabled एट्रिब्यूट वाले फॉर्म कंट्रोल्स डिफ़ॉल्ट रूप से नॉन-एडिटेबल एलिमेंट्स (जैसे <div>,

:read-write सेलेक्टर का उपयोग :read-write सेलेक्टर उन एलिमेंट्स को सिलेक्ट करता है जो **एडिटेबल** हैं (यानी यूजर द्वारा संपादित किए जा सकते हैं)। इसमें शामिल हैं: <input> और <textarea> जिनमें readonly या disabled एट्रिब्यूट नहीं है contenteditable एट्रिब्यूट वाले एलिमेंट्स उदाहरण

:link सेलेक्टर का उद्देश्य :link सेलेक्टर अनविज़िटेड हाइपरलिंक्स के लिए डिफ़ॉल्ट स्टाइल परिभाषित करता है। यह :visited, :hover, :active के साथ मिलकर लिंक के सभी स्टेट्स कवर करता है। उदाहरण <!DOCTYPE html> <html> <head> <style> a:link { background-color: or

:link सेलेक्टर का उपयोग :link सेलेक्टर उन लिंक्स (<a href>) को सिलेक्ट करता है जिन्हें यूजर ने **अभी तक विज़िट नहीं किया** है। यह ब्राउज़र हिस्ट्री पर निर्भर करता है। उदाहरण <!DOCTYPE html> <html> <head> <style> a:link { background-color: orange;

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

:nth-child(n) सेलेक्टर का उद्देश्य :nth-child(n) सेलेक्टर पैरेंट के सभी चाइल्ड्स में से nth पोजिशन पर स्थित एलिमेंट को सिलेक्ट करता है (यदि वह निर्दिष्ट टाइप का हो)। उदाहरण <!DOCTYPE html> <html> <head> <style> p:nth-child(4) { background: orange;

rotateX() मेथड का उपयोग rotateX(angle) मेथड एलिमेंट को X-axis (हॉरिजॉन्टल अक्ष) के चारों ओर 3D स्पेस में घुमाता है। उदाहरण <html> <head> <style> div { width: 200px; height: 100px; background-color: pink; border: 1px solid black; }

:nth-child(n) सेलेक्टर का उपयोग :nth-child(n) सेलेक्टर पैरेंट के **सभी चाइल्ड्स** (किसी भी टाइप के) में से nth चाइल्ड को सिलेक्ट करता है, लेकिन केवल तभी जब वह निर्दिष्ट टाइप का हो (यहां p)। उदाहरण <!DOCTYPE html> <html> <head> <style> p:nth-child(4) { bac

:nth-last-of-type(n) सेलेक्टर का उपयोग :nth-last-of-type(n) सेलेक्टर पैरेंट के अंदर अंतिम से गिनती करके अपने टाइप के nth एलिमेंट को सिलेक्ट करता है। उदाहरण <!DOCTYPE html> <html> <head> <style> p:nth-last-of-type(2) { background: blue; color: whit

:nth-of-type(n) सेलेक्टर का उद्देश्य :nth-of-type(n) सेलेक्टर पैरेंट के अंदर अपने टाइप के nth एलिमेंट को टार्गेट करता है, अन्य टाइप के एलिमेंट्स को नजरअंदाज करते हुए। उदाहरण <!DOCTYPE html> <html> <head> <style> p:nth-of-type(2) { background: yellow;

3D ट्रांसफॉर्म फंक्शन्स की सूची CSS3 में 3D ट्रांसफॉर्मेशन के लिए निम्नलिखित फंक्शन्स उपलब्ध हैं। इन्हें transform प्रॉपर्टी में उपयोग किया जाता है। फंक्शनविवरण matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)16 मानों वाले 4x4 मैट्रिक्स से 3D ट्रांसफॉर्मेशन परिभाषित करता है translate

:nth-of-type(n) सेलेक्टर का उपयोग :nth-of-type(n) सेलेक्टर पैरेंट के अंदर अपने टाइप के nth एलिमेंट को सिलेक्ट करता है। यह केवल उसी टाइप के एलिमेंट्स गिनता है। उदाहरण <!DOCTYPE html> <html> <head> <style> p:nth-of-type(2) { background: yellow; }

:hover सेलेक्टर का उपयोग :hover सेलेक्टर तब लागू होता है जब यूजर माउस कर्सर को एलिमेंट (आमतौर पर लिंक या बटन) के ऊपर होवर करता है। यह इंटरैक्टिव UI के लिए आवश्यक विज़ुअल फीडबैक प्रदान करता है। उदाहरण <!DOCTYPE html> <html> <head> <style> a:hover { backgro

:in-range सेलेक्टर का उद्देश्य :in-range सेलेक्टर उन इनपुट एलिमेंट्स को स्टाइल करता है जिनकी वर्तमान वैल्यू min और max एट्रिब्यूट्स द्वारा परिभाषित रेंज के **अंदर** होती है। उदाहरण <!DOCTYPE html> <html> <head> <style> input:in-range { border: 3px dashed

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

:invalid सेलेक्टर का उपयोग :invalid सेलेक्टर उन फॉर्म एलिमेंट्स को सिलेक्ट करता है जिनकी वैल्यू उनके टाइप या कंस्ट्रेंट्स (जैसे type=email, pattern, required) के अनुसार **अमान्य** है। यह क्लाइंट-साइड वैलिडेशन फीडबैक के लिए उपयोगी है। उदाहरण <!DOCTYPE html> <html> <head> <

:lang() सेलेक्टर का व्यावहारिक उदाहरण यह आलेख दिखाता है कि कैसे lang एट्रिब्यूट वाले पैराग्राफ को विशिष्ट स्टाइल दिया जा सकता है। उदाहरण <!DOCTYPE html> <html> <head> <style> p:lang(fr) { background: green; } </style> </head> <