CSS3 विशेषता चयनकर्ता फ़ाइल प्रकार को लक्षित कर रहा है

यह लेख हमारा हिस्सा है "HTML5 / CSS3 ट्यूटोरियल सीरीज़" - आपको एक बेहतर डिजाइनर और / या डेवलपर बनाने में मदद करने के लिए समर्पित है. यहां क्लिक करे एक ही श्रृंखला से अधिक लेख देखने के लिए.

विशेषता चयनकर्ताओं एक तत्व का चयन करने के लिए वास्तव में उपयोगी है, बिना किसी तत्व को जोड़कर आईडी या कक्षाएं. जब तक लक्षित तत्व की तरह एक विशेषता है href, src तथा प्रकार हमें ऐसा करने की जरूरत नहीं है.

विशेषता चयनकर्ता वास्तव में आसपास रहे हैं सीएसएस 2.1 के बाद से, और अब CSS3 विनिर्देशों में कुछ और प्रकार के विशेषता चयनकर्ताओं को जोड़ा गया है, हम तत्व की विशेषता को और भी विशेष रूप से लक्षित करने में सक्षम हैं.

और, इस पोस्ट में, हम चयन करने के लिए एक वाक्यविन्यास का उपयोग करने जा रहे हैं फाइल का प्रकार यह विशेषता के मान के हिस्से के रूप में डाला गया है.

सिंटैक्स और ब्राउज़र समर्थन

फाइल का प्रकार हमेशा फ़ाइल नाम के अंत में होता है। तो, उस का चयन करने के लिए फाइल का प्रकार हम निम्नलिखित सिंटैक्स का उपयोग कर सकते हैं [Attr $ = "का मान"]. यह वाक्यविन्यास उपयोग करता है $ = ऑपरेटर जो विशेषता मान के अंत को लक्षित करेगा, उदाहरण के लिए:

 [a href $ = "। pdf"]: पृष्ठभूमि से पहले: url ('... /images/document-pdf-text.png') no-repeat;  

ऊपर दिया गया स्निपेट प्रत्येक लिंक का चयन करेगा जो कि विशेषता मान के साथ समाप्त होता है .पीडीएफ और में एक शब्द-दस्तावेज़-आइकन डालें : से पहले छद्म तत्व.

पीडीएफ आइकन स्रोत: फगु आइकॉन

हालांकि यह इस चयनकर्ता का एक सामान्य उपयोग है, हम निश्चित रूप से इससे आगे जा सकते हैं.

ब्राउज़र संगतता के बारे में; हालाँकि इस सिंटैक्स को आधिकारिक तौर पर CSS3 विनिर्देश के रूप में पेश किया गया है, यह वास्तव में तब से समर्थित है इंटरनेट एक्सप्लोरर 7, तो आप इसे सुरक्षित रूप से अपने सभी डिजाइनों के माध्यम से लागू कर सकते हैं.

उदाहरण

आपने प्रयत्न नहीं किया, तो आपको कभी पता नहीं चलेगा. हमें अभी कुछ नया समझने के लिए कुछ नया करने की कोशिश करने की जरूरत है जो हम अभी तक नहीं समझ पाए हैं। तो यहाँ, हम यह प्रदर्शित करने जा रहे हैं कि कैसे यह वाक्यविन्यास एक विशेष HTML संरचना में एक तत्व को लक्षित करने के लिए बहुत उपयोगी और आसान हो सकता है जो केवल सादा सीएसएस का उपयोग करके लागू करना थोड़ा मुश्किल होता था.

नीचे, हम ए HTML5 संरचना इसके कैप्शन के साथ तीन छवियों को सूचीबद्ध करने के लिए। यह केवल प्रदर्शन के उद्देश्य के लिए है, आपके मार्कअप को निम्न स्निपेट की तरह होना आवश्यक नहीं है (उदाहरण के लिए आपके पास केवल एक छवि या यहां तक ​​कि तीन और चित्र हो सकते हैं), लेकिन बिंदु क्या आपको पता है कि इस वाक्यविन्यास को कैसे लागू किया जा सकता है एक विशेष HTML संरचना.

ऊपर सूचीबद्ध प्रत्येक चित्र में निम्नलिखित प्रारूप या एक्सटेंशन हैं, जेपीजी, png, तथा gif. उनके पास एक कैप्शन भी है जो इसकी छवि विस्तार का प्रतिनिधित्व करता है; यह कैप्शन तब छवि लेबल के रूप में कार्य करेगा.

इसलिए, यहां योजना है, हम प्रत्येक अलग छवि विस्तार के लिए कैप्शन के लिए अलग-अलग पृष्ठभूमि रंग देने जा रहे हैं। JPG छवि एक मिल जाएगा हरा कैप्शन का रंग, PNG मिलेगा नीला, और अंत में जिफ मिलेगा बैंगनी.

सबसे पहले, आइए हम आंकड़ा टैग की स्थिति को अपेक्षाकृत निर्धारित करते हैं, क्योंकि हम लागू होने जा रहे हैं पूर्ण कैप्शन के लिए स्थिति.

 आंकड़ा स्थिति: रिश्तेदार;  

सीमाओं और छाया के साथ छवियों के लिए थोड़ा सजावट जोड़ें.

 img सीमा: 5px ठोस #ccc; -webkit- बॉक्स-छाया: 1px 1px 3px 0px rgba (0, 0, 0, .5); बॉक्स-छाया: 1px 1px 3px 0px rgba (0, 0, 0, .5);  

और फिर, हम कैप्शन के लिए डिफ़ॉल्ट शैली और स्थिति निर्धारित करते हैं। छवि कैप्शन या लेबल में 50px वर्ग होगा.

 img + अंजीर रंग: # एफएफ; स्थिति: निरपेक्ष; शीर्ष: 0; सही: 0; चौड़ाई: 50 पीएक्स; ऊंचाई: 50 पीएक्स; लाइन-ऊँचाई: 50 पीएक्स; पाठ-संरेखण: केंद्र;  

अब पृष्ठभूमि का रंग जोड़ने का समय आ गया है। ऐसा करने के लिए, हम विशेषता चयनकर्ता को आसन्न सिबलिंग चयनकर्ता के साथ जोड़ सकते हैं, +.

 img [src $ = "। jpg"] + अंजीर पृष्ठभूमि-रंग: # a8b700;  

ऊपर दिया गया स्निपेट स्रोत की विशेषता के साथ हर छवि को लक्षित करेगा .जेपीजी, फिर आसन्न चयनकर्ता को इसके बगल का तत्व मिलेगा। इस मामले में figcaption के साथ जोड़ा जाएगा # a8b700 पीछे का रंग.

और बाकी इमेज फॉर्मेट, .png और .gif के लिए यहाँ सभी कोड हैं.

 img [src $ = "। png"] + अंजीर पृष्ठभूमि-रंग: # 38996;  img [src $ = "। gif"] + अंजीर पृष्ठभूमि-रंग: # 8960a7;  

अब, देखते हैं कि यह नीचे दिए गए डेमो लिंक से लाइव कैसे होता है, अन्यथा आप इसे ऑफ़लाइन जांचने के लिए स्रोत डाउनलोड कर सकते हैं.

• डेमो
• स्रोत डाउनलोड करें

छवि स्रोत इस प्रकार हैं: MacPro 1, MacPro 2 और MacPro 3

निष्कर्ष

हमें उम्मीद है कि आप विशेष चयनकर्ता का उपयोग करके स्टाइलिंग के सुरुचिपूर्ण पक्ष को देख सकते हैं, जैसे कि हमने विशेषता चयनकर्ता का उपयोग करके ऊपर प्रदर्शित करने की कोशिश की है। तो, अगली बार जब आप अपने HTML को स्टाइल कर रहे हों, तो हम आपको इस बात पर बहुत आश्वस्त करते हैं कि क्या आपके स्टाइल को कुछ विशेष चयनकर्ता का उपयोग करके लागू किया जा सकता है, बजाय इसके कि आप अपने ठीक से संरचित मार्कअप को बर्बाद कर दें कक्षाएं या आईडी.

वास्तव में इस प्रकार के दो और नए चयनकर्ता हैं जिन्हें हम अगले पदों में शामिल करेंगे, इसलिए बने रहें.