CSS3 के नकार में देखें (नहीं) चयनकर्ता
CSS में कुछ चयनकर्ता हैं जो आपको कुछ शर्तों जैसे तत्वों का चयन करने की अनुमति देते हैं : मंडराना, : फोकस, : सक्रिय, आदि फिर भी आज हम उन चयनकर्ताओं को शामिल नहीं करेंगे। हम एक में देखेंगे जो अभी भी एक ज्ञात विधि है लेकिन अधिकांश वेब डिजाइनरों द्वारा उपयोग किया जाता है - यही है :नहीं चयनकर्ता या नकारात्मक चयनकर्ता के रूप में भी जाना जाता है.
यह क्या करता है?
मुझे यकीन है कि :नहीं नाम ने पहले ही अपने कार्य का वर्णन कर दिया है, कि वह बस चयन करेगा निर्दिष्ट तत्व या स्थिति के विपरीत. उदाहरण के लिए:
यह सिंटैक्स इसके अलावा किसी भी तत्व का चयन करेगा पी (पैराग्राफ).
: नहीं (पी) जबकि नीचे दिया गया सिंटैक्स उदाहरण का चयन करेगा div तत्व जो करता है नहीं वर्ग है एबीसी
div: नहीं (.abc) सब ठीक है, अब, इस चयनकर्ता को वास्तविक उदाहरण में आज़माते हैं:
सबसे पहले, आइए विकिपीडिया के कुछ लिंक के साथ कुछ पैराग्राफ बनाते हैं और काल्पनिक डोमेन के साथ कुछ लिंक। यहाँ पैराग्राफ के लिए HTML मार्कअप है.
सीएसएस: चयनकर्ता डेमो नहीं
जुजबसे आवेदक तिल तिल चुप्प चूप्स चॉकलेट केक. ओट केक मार्शमैलो वाइपस टॉफी डोनट केक। चुप्प चूप्स जेली कपकेक गुम्मी भालू। नींबू की बूंदे केक वेफर.
चीज़केक चॉकलेट केक डोनट जेली मीठा रोल पाउडर soufflÃ? Ã ?? Ã'chocolate © चॉकलेट केक। Wypas सूती कैंडी नींबू बूँदें कुकी कैंडी डोनट bonbon मार्जिपन। मैकरॉन कैंडी लिकोरिस जेली-ओ। चॉकलेट पाई स्वीट रोल कैंडी मार्शमैलो ड्रैगैस ?? Ã ?? Ã'Â © ई कॉटन कैंडी ब्राउनी मार्शमैलो.
पुल्लिंग टॉपिंग मार्शमॉलो भालू का पंजा। पाई मफिन पेस्ट्री गमियां फ्रूटकेक ब्राउनी जेली जिंजरब्रेड तिल स्नैक्स। कैंडी पुडिंग कप केक भालू पंजा। गाजर का केक मफिन कैंडी कैंडी टोस्टी रोल मफिन। जेली बीन्स टार्ट ड्रैग? ?? ?? Ã'e © ई स्वीट आइसिंग टॉपिंग चॉकलेट बार. मीठे रोल टॉफ़ी चीनी बेर पेस्ट्री ड्रैग? Ã ?? Ã'e © ई bonbon कैंडी मफिन.
केक मार्जिपन ऐपलेक पेस्ट्री wypas फलकेक। ओट केक चॉकलेट वीपस ड्रैग ?? Ã ?? Ã'e © ई शुगर प्लम गाजर केक आइसिंग। कारमेल चॉकलेट बार क्रोइसैन वेफर कपकेक पाई जुज्यूब चॉकलेट बार। बिस्किट कैंडी के डिब्बे ड्रैगै? SoufflÃ? ?? Ã'mi © गुम्मी भालू जेली बीन्स तिल के टुकड़े कुकी मिठाई मिठाई bonbon.
यहां योजना यह है: हम केवल उन लिंक का चयन करेंगे जो विकिपीडिया की ओर इशारा नहीं कर रहे हैं और फिर उन लिंक को उन लिंक पर ध्यान देने के लिए एक विस्मयादिबोधक चिह्न दें.
सबसे पहले, हम एक जोड़ देंगे :बाद सभी लिंक पर छद्म तत्व चिह्न लगाने के लिए, और हम इसे एक के रूप में परिभाषित करते हैं इनलाइन-ब्लॉक तत्त्व.
a: प्रदर्शन के बाद: इनलाइन-ब्लॉक;
फिर, विकिपीडिया की ओर इशारा नहीं करने वाले हर लिंक का चयन करने के लिए, हम संयोजन करेंगे :नहीं एक विशेषता चयनकर्ता के साथ चयनकर्ता। यहाँ विशेषता चयनकर्ता हर एंकर टैग का चयन करेगा, जिसके साथ href विशेषता शुरू होती है http://en.wikipedia.org/ और इसके साथ संयोजन करके :नहीं, यह स्पष्ट रूप से विपरीत का चयन करेगा। तो अब हम शुरू करें:
a: नहीं ([href ^ = "http://en.wikipedia.org/"]): पृष्ठभूमि-रंग: # F8EEBD के बाद; बॉर्डर: 1px ठोस # EEC56D; बॉर्डर-त्रिज्या: 3px 3px 3px 3px; रंग: # B0811E; सामग्री: "!"; फ़ॉन्ट-आकार: 10pt; मार्जिन-बाएं: 5 पीएक्स; गद्दी: 1px 6px; स्थिति: रिश्तेदार;
यह काम करता हैं! एंकर टैग जो विकिपीडिया को इंगित नहीं करते हैं, अब विस्मयादिबोधक चिह्न है.
क्रोम बग
यदि आप इसे क्रोम में देखते हैं, तो आप देखेंगे कि प्रदान किया गया प्रभाव ऊपर जैसा नहीं है। सभी लिंक URL की परवाह किए बिना एक विस्मयादिबोधक चिह्न है.
इस मामले को वास्तव में बग के रूप में संबोधित किया गया है। इसलिए, इस बग को ठीक करने के लिए, हमें इस नियम को जोड़ने की आवश्यकता है.
[a href ^ = "http://en.wikipedia.org/"] / * क्रोम हैक * / प्रदर्शन: इनलाइन-ब्लॉक;
और अब समस्या को ठीक किया जाना चाहिए था.
- डेमो
निष्कर्ष
का उपयोग करते हुए कुछ परिस्थितियों में :नहीं चयनकर्ता वास्तव में सबसे प्रभावी विकल्प है, उपरोक्त उदाहरण की तरह, जहां हम अनावश्यक वर्ग, या दस्तावेज़ में अतिरिक्त मार्कअप को जोड़े बिना कुछ यादृच्छिक तत्वों का चयन करने में सक्षम हैं।.
आप वास्तव में इस चयनकर्ता का उपयोग करके महान प्रभाव का निर्माण कर सकते हैं, और यह एक उदाहरण है: CSS3 के साथ फ़ंक्शनलिटी फ़िल्टर करें
