' टैग वाले 'div' को स्टाइल करना आवश्यक है। ऐसे मामलों में, ' :है() 'पैरेंट चयनकर्ता छद्म वर्ग का उपयोग किया जाता है।
यह पोस्ट वर्णन करेगा:
- अपने बाल तत्वों को निर्दिष्ट करके एक मूल तत्व को कैसे स्टाइल करें?
- सभी बाल तत्वों का चयन कैसे करें?
- सभी प्रत्यक्ष बाल तत्वों का चयन कैसे करें?
अपने बाल तत्वों को निर्दिष्ट करके एक मूल तत्व को कैसे स्टाइल करें?
सबसे पहले, एक HTML फ़ाइल बनाएं जिसमें दो 'div' तत्व हों:
- दो जोड़ें ' <दिव> 'समान वर्ग वाले तत्व' जनक-विभाग ”।
- पहले वाले में दो ' ”तत्व।
- दूसरे “” तत्व में “ <एच1> ' और ' ': < डिव कक्षा = 'पैरेंट-डिव' >
< पी > नमस्ते < / पी >
< पी > दुनिया < / पी >
< / डिव >
< डिव कक्षा = 'पैरेंट-डिव' >
< एच 1 > हैलो < / एच 1 >
< पी > मेरे पास 'एच 1' टैग है < / पी >
< / डिव >यदि '
' तत्व को स्टाइल करना आवश्यक है जिसमें ' <एच1> ” तत्व, तो हम बच्चे को पकड़कर मूल तत्व की स्टाइलिंग को समायोजित कर सकते हैं। इस प्रयोजन के लिए, हम 'का उपयोग कर सकते हैं :है() ” चयनकर्ता।
दोनों “
” तत्वों में से, “” तत्व वाले “का उपयोग करके उसे चुनें .वर्ग-नाम: है (बच्चे का नाम) ':
.पैरेंट-डिव : है ( एच 1 ) {
पीछे का रंग : #103e6d ;
रंग : सागर की कौड़ी ;
चौड़ाई : 150 पीएक्स ;
कद : 150 पीएक्स ;
बॉर्डर-त्रिज्या : पचास% ;
पाठ संरेखित : केंद्र ;
}यहां, हमने निम्नलिखित सीएसएस गुणों को मूल तत्व पर लागू किया है:
- ' पीछे का रंग ” का उपयोग तत्व की पृष्ठभूमि का रंग निर्दिष्ट करने के लिए किया जाता है।
- ' रंग 'तत्व पाठ रंग निर्दिष्ट करता है।
- ' चौड़ाई ” का उपयोग तत्व की चौड़ाई को परिभाषित करने के लिए किया जाता है।
- ' कद 'तत्व की ऊंचाई निर्दिष्ट करता है।
- ' बॉर्डर-त्रिज्या ” संपत्ति का उपयोग तत्व के गोल कोनों को सेट करने के लिए किया जाता है।
- ' पाठ संरेखित 'पाठ संरेखण निर्दिष्ट करता है।
उत्पादन
सभी बाल तत्वों का चयन कैसे करें?
माता-पिता चयनकर्ता की सहायता से बाल तत्व का चयन करने के लिए, दिए गए उदाहरण को देखें।
उदाहरण
HTML पेज बनाने के लिए निम्नलिखित चरणों को लागू करें:
- एक दिव्य तत्व जोड़ें जिसमें दो ' 'टैग और एक' <दिव> 'कक्षा वाले टैग' बच्चे विभाजन ”।
- बच्चा ' डिव ” तत्व में एक “
” तत्व होता है:
< पी > नमस्ते < / पी >
< पी > दुनिया < / पी >
< डिव कक्षा = 'चाइल्ड-डिव' >
< पी > मैं चाइल्ड डिव हूं < / पी >
< / डिव >
< / डिव >हम माता-पिता के माध्यम से बाल तत्वों का चयन कर सकते हैं ' <दिव> ' कक्षा। यह न केवल इसके प्रत्यक्ष का चयन करेगा ” पी 'तत्व लेकिन नेस्टेड का भी चयन करता है' पी 'तत्व:
.पैरेंट-डिव पी {
पीछे का रंग : #7F167F ;
फुहारा परिवार : घसीट ;
फ़ॉन्ट आकार : 25 पीएक्स ;
पाठ संरेखित : केंद्र ;
रंग : सफेद धुआं ;
}उत्पादन
सभी प्रत्यक्ष बाल तत्वों का चयन कैसे करें?
माता-पिता div के प्रत्यक्ष बच्चे का चयन करने के लिए, हम 'का उपयोग कर सकते हैं' > ' प्रतीक। यह उन सभी 'पी' तत्वों को चुनने में मदद करेगा जो माता-पिता के प्रत्यक्ष बच्चे हैं ' <दिव> ”। उदाहरण के लिए, हमने निम्नलिखित CSS गुण लागू किए हैं:
.पैरेंट-डिव > पी {
पीछे का रंग : #7F167F ;
फुहारा परिवार : घसीट ;
फ़ॉन्ट आकार : 30 पीएक्स ;
पाठ संरेखित : केंद्र ;
रंग : सफेद धुआं ;
}' फुहारा परिवार 'चयनित तत्व का फ़ॉन्ट निर्दिष्ट करता है और' फ़ॉन्ट आकार ” फ़ॉन्ट के आकार को परिभाषित करने के लिए प्रयोग किया जाता है:
उत्पादन
हमने HTML और CSS में CSS पैरेंट सिलेक्टर्स के बारे में चर्चा की है।
निष्कर्ष
सीएसएस में, ' :है() 'चयनकर्ता का उपयोग माता-पिता चयनकर्ता छद्म वर्ग के रूप में किया जाता है। यह विशेष रूप से मूल तत्वों का चयन करने के लिए प्रयोग किया जाता है। उदाहरण के लिए, ' .parent-div: है (h1) '' वाले मूल तत्व का चयन करता है <एच1> ”तत्व। मूल तत्व के बाल तत्व का चयन करने के लिए, 'का उपयोग करें' .पैरेंट-डिव पी ”। कंडीशन स्टेटमेंट का उपयोग सभी प्रत्यक्ष बाल तत्वों का चयन करने के लिए भी किया जा सकता है। इस लेख में CSS पेरेंट चयनकर्ता को उदाहरणों के साथ समझाया गया है।