सीएसएस चयनकर्ता का उपयोग दूसरे डिव के भीतर पहले डिव का चयन करने के लिए किया जा सकता है

95

मेरे पास कुछ है:

<div id="content>

   <h1>Welcome to Motor City Deli!</h1>
   <div style=" font-size: 1.2em; font-weight: bolder;">Sep 19, 2010</div>
   <div > ... </div>

दूसरे डिव के लिए सीएसएस चयनकर्ता क्या है ("सामग्री" डिव के भीतर 1 डिव) ऐसा है कि मैं उस डिव के भीतर दिनांक का फ़ॉन्ट रंग सेट कर सकता हूं?

css css-selectors

— GregH
स्रोत

1

कृपया शीर्ष मतदान के उत्तर को स्वीकार करें, यह निश्चित रूप से सही है।

— बैरी माइकल डॉयल

224

आपके सवाल का सबसे सही जवाब है ...

#content > div:first-of-type { /* css */ }

यह सीएसएस को पहले डिव में लागू करेगा जो कि # कॉन्टेंट का सीधा बच्चा है (जो # कॉन्टेंट का पहला चाइल्ड एलिमेंट हो भी सकता है और नहीं भी)

एक अन्य विकल्प:

#content > div:nth-of-type(1) { /* css */ }

— जेरेमी मोरिट्ज़
स्रोत

6

सहमत हूं कि यह प्रश्न का केवल सही उत्तर है और इसे स्वीकार किया जाना चाहिए।

— इल्या स्ट्रेल्ट्सिन

क्या आप मुझे बता सकते हैं कि exceptपहले div / last div का चयन कैसे करें ?

— Tân

4

@ हेप्पी कोडिंग #content > div:not(:last-of-type) { /* css */ }

— जेरेमी मोरिट्ज़

@ Tân यदि आप पहले और अंतिम को छोड़कर सभी डिव चाहते हैं, तो यह होगा ... #content > div:not(:first-of-type):not(:last-of-type) { /* css */ }

— जेरेमी मोरिट्ज

20

तुम्हें चाहिए

#content div:first-child {
/*css*/
}

— कैप्टन ओटिस
स्रोत

3

काम नहीं करेगा क्योंकि <div>पहला बच्चा नहीं है (यह <h1>) है।

— जोश लेइटेल

उल्लेख नहीं करने के लिए यह IE में बिल्कुल भी काम नहीं करेगा भले ही divवह पहला बच्चा होगा।

— वैलेंटाइन फ्लैचेल

1

वास्तव में? डब्लू 3 कहता है कि यह तब तक रहेगा जब तक एक सिद्धांत निर्दिष्ट है। (मैं ईमानदारी से हालांकि पता नहीं है।)

— जोश Leitzel

3

बस एक परीक्षण चला, वास्तव में यह काम करता है अगर सिद्धांत निर्दिष्ट है। मेरे बचाव में, मुझे आश्चर्य नहीं होगा अगर सामान IE में काम करना शुरू कर देता है यदि आप फ़ाइल के शीर्ष पर <the_cake_is_a_lie> टाइप करेंगे ...

— Valentin Flachsel

1

मैं हमेशा उत्तर पोस्ट करने से पहले परीक्षण करता हूं। और केक झूठ है।

— कैप्टन ओटिस

16

यदि हम मान सकते हैं कि H1 हमेशा वहां रहने वाला है, तो

div h1+div {...}

लेकिन सामग्री div की आईडी निर्दिष्ट करने से डरो मत:

#content h1+div {...}

यह उतना ही अच्छा है जितना कि आप jQuery जैसी जावास्क्रिप्ट लाइब्रेरी का सहारा लिए बिना अभी क्रॉस-ब्राउज़र प्राप्त कर सकते हैं। H1 + div का उपयोग यह सुनिश्चित करता है कि H1 को स्टाइल के बाद केवल पहला div है। विकल्प हैं, लेकिन वे CSS3 चयनकर्ताओं पर भरोसा करते हैं, और इस प्रकार अधिकांश IE इंस्टॉल पर काम नहीं करेंगे।

— स्टेन रोजर्स
स्रोत

+1। उस बारे में भी नहीं सोचा। ध्यान रखें कि यह समाधान IE6 में काम नहीं करेगा।

— जोश लेइटेल

6

आप जिस चीज़ की तलाश कर रहे हैं, वह सबसे नज़दीकी है : पहला-बच्चा स्यूडोसक्लस ; दुर्भाग्य से यह आपके मामले में काम नहीं करेगा क्योंकि आपके पास <h1>इससे पहले है <div>s। मेरा सुझाव है कि आप या तो एक वर्ग जोड़ सकते हैं <div>, जैसे <div class="first">और फिर इसे इस तरह से स्टाइल करें, या jQuery का उपयोग करें यदि आप वास्तव में एक वर्ग नहीं जोड़ सकते हैं:

$('#content > div:first')

— जोश Leitzel
स्रोत

1

misspell - होना चाहिए$('#content > div.first)

— Mateusz Odelga