यह पोस्ट एक CSS वर्ग को अन्य CSS वर्ग के भीतर लक्षित करने के बारे में बताएगी।
CSS क्लास को अन्य CSS क्लास में कैसे लक्षित करें?
एक CSS क्लास को दूसरी CSS क्लास के अंदर लक्षित करने के लिए, पहले div कंटेनर बनाएं और प्रत्येक कंटेनर में क्लास विशेषताएँ जोड़ें। फिर, उनके नाम/मूल्य का उपयोग करके सीएसएस में एक या अधिक कक्षाओं तक पहुंचें।
चरण 1: एक 'div' कंटेनर जोड़ें
प्रारंभ में, 'की सहायता से एक दिव्य तत्व जोड़ें <दिव> ”। फिर, आगे के उपयोग के लिए एक वर्ग विशेषता आवंटित करें।
चरण 2: नेस्टेड 'डिव' कंटेनर बनाएं
अगला, चरण 1 की समान प्रक्रिया का पालन करके नेस्टेड डिव कंटेनर बनाएं:
< डिव कक्षा = 'मुख्य सामग्री' >
< डिव कक्षा = 'मेज' >
< डिव कक्षा = 'पंक्ति' >
< डिव कक्षा = 'सी-लेफ्ट' > शादी कर < / डिव >
< डिव कक्षा = 'सी-राइट' > जैक < / डिव >
< डिव कक्षा = 'सी-लेफ्ट' > टॉम < / डिव >
< डिव कक्षा = 'सी-राइट' > जुलाई < / डिव >
< / डिव >
< / डिव >
< / डिव >
उत्पादन
चरण 3: मुख्य 'div' कंटेनर पर स्टाइलिंग लागू करें
मुख्य एक्सेस करें ' डिव 'कक्षा नाम की मदद से कंटेनर' ।मुख्य सामग्री ':
।मुख्य सामग्री {
चौड़ाई : 40% ;
अंतर : 0 ऑटो ;
रंग : नीला ;
सीमा : 2 पीएक्स छितराया हुआ नीला ;
पाठ संरेखित : केंद्र ;
}
यहाँ:
- ' चौड़ाई 'तत्व की चौड़ाई का आकार निर्दिष्ट करता है।
- ' अंतर ” परिभाषित सीमा के बाहर तत्व के चारों ओर स्थान आवंटित करता है।
- ' रंग ”तत्व में जोड़े गए पाठ के लिए रंग परिभाषित करता है।
- ' सीमा ” HTML में तत्व के चारों ओर एक रूपरेखा या सीमा परिभाषित करता है।
- ' पाठ संरेखित 'तत्व के पाठ के संरेखण को परिभाषित करता है।
चरण 4: दूसरी कक्षा को स्टाइल करें
सीएसएस मुख्य वर्ग और अन्य नेस्टेड कक्षाओं को उनके नामों का उपयोग करके एक्सेस करें। फिर, अपनी पसंद के अनुसार मान निर्दिष्ट करके कंटेनर की चौड़ाई निर्धारित करें:
।मुख्य सामग्री ।मेज {चौड़ाई : 80% ;
}
इसके अलावा, उपरोक्त प्रक्रिया का पालन करके अन्य वर्ग तक पहुंचें और नीचे दिए गए कोड स्निपेट में उल्लिखित सीएसएस गुणों को लागू करें:
।मुख्य सामग्री सी-सही {दिखाना : इनलाइन-ब्लॉक ;
फ़ॉन्ट आकार : 20 पीएक्स ;
}
उपरोक्त कोड स्निपेट के अनुसार:
- ' दिखाना ” संपत्ति का उपयोग किसी तत्व के प्रदर्शन को सेट करने के लिए किया जाता है।
- ' फ़ॉन्ट आकार 'कंटेनर में जोड़े गए पाठ का आकार निर्दिष्ट करता है।
अब, उसी विधि का उपयोग करके अन्य वर्गों तक पहुंचें और नीचे उल्लिखित सीएसएस गुणों को लागू करें:
।मुख्य सामग्री सी-बाएं {चौड़ाई : 140 पीएक्स ;
मार्जिन-सही : 6 पीएक्स ;
फ़ॉन्ट आकार : 16 पीएक्स ;
}
ऐसा करने के लिए, हम आवेदन करेंगे ' चौड़ाई ”, “ मार्जिन-सही ' और ' फ़ॉन्ट आकार ” स्टाइलिंग उद्देश्यों के लिए।
इसके अलावा, मुख्य का उपयोग करें ' डिव ” अन्य नेस्टेड डिव कंटेनर के साथ कंटेनर उनके वर्ग नाम का उपयोग करके और निम्नलिखित सीएसएस गुणों को लागू करें
।मुख्य सी-सही {चौड़ाई : ऑटो ;
फ़ॉन्ट आकार : 15 पीएक्स ;
रंग : #फफ्फ ;
मार्जिन-सही : 20 पीएक्स ;
फ़ॉन्ट वजन : सामान्य ;
}
उत्पादन
यह सब एक सीएसएस वर्ग को किसी अन्य सीएसएस वर्ग के अंदर लक्षित करने के बारे में है।
निष्कर्ष
किसी अन्य सीएसएस वर्ग के भीतर एक सीएसएस वर्ग को लक्षित करने के लिए, सबसे पहले, मुख्य तक पहुंचें ' डिव 'सौंपी गई वर्ग विशेषता के माध्यम से। फिर, उसी प्रक्रिया का पालन करके दूसरे 'div' कंटेनर तक पहुँचें। इसके अलावा, उपयोगकर्ता अन्य सीएसएस वर्ग के भीतर एक सीएसएस वर्ग को लक्षित कर सकते हैं। इस पोस्ट ने एक CSS क्लास को दूसरे CSS क्लास के भीतर लक्षित करने की विधि का प्रदर्शन किया है।