: पहला बच्चा उम्मीद के मुताबिक काम नहीं कर रहा है

96

मैं पहली बार का चयन करने के कोशिश कर रहा हूँ h1के अंदर एक divएक वर्ग कहा जाता है के साथ detail_container। यदि यह इसके h1भीतर पहला तत्व है तो यह काम करता है div, लेकिन यदि इसके बाद यह आता है तो यह ulकाम नहीं करेगा।

<style type="text/css">
.detail_container h1:first-child
{
color:blue;
} 
</style>
</head>
<body>
<div class="detail_container">
    <ul>
    <li></li>
    <li></li>
    </ul>
    <h1>First H1</h1>
    <h1>Second H1</h1>
</div>
</body>
</html>

मैं इस धारणा के अधीन था कि सीएसएस मेरे पास पहला h1मामला है, जहां वह इस में है div। मैं इसे कैसे कारगर बना सकता हूं?

css css-selectors

— द मफिन मैन
स्रोत

1

सीएसएस जो कुछ भी नहीं कर सकता, जावास्क्रिप्ट कर सकता है।

— JCOC611

11

यह कुछ ऐसा है जो आप CSS3 के साथ कर सकते हैं हालांकि :)

— बोल्ट

216

h1:first-childचयनकर्ता साधन

अपने माता-पिता के पहले बच्चे का चयन करें
यदि और केवल अगर यह एक h1तत्व है।

:first-childकंटेनर के यहाँ है ul, और इस तरह कर सकते हैं संतुष्ट नहीं के रूप में h1:first-child।

:first-of-typeआपके मामले के लिए CSS3 है :

.detail_container h1:first-of-type
{
    color: blue;
}

लेकिन ब्राउज़र की अनुकूलता के कारण, आप h1कक्षा को पहले लक्ष्य देने से बेहतर हैं , फिर उस वर्ग को लक्षित करें:

.detail_container h1.first
{
    color: blue;
}

— बोल्टकॉक
स्रोत

2

मैं अब समझता हूं, हालांकि मुझे लगता है कि मानक बनाते समय उन्हें दोनों संस्करणों को लागू करना चाहिए था।

— मफिन मैन

IE9 रिलीज में काम नहीं कर रहा। इसे h1 कहते हैं: डेवलपर टूल में अज्ञात

— Cine

11

:first-of-typeचयनकर्ता की संगतता सूची ।

— जेस टेलफ़ोर्ड

4

नई संगतता सूची की :first-of-type। पुराना लिंक गलत है।

— BadHorsie 10

मेरे विचार में, यह शब्द :first-childसमझने के लिए स्पष्ट नहीं है, क्योंकि आप आइटम को सीएसएस चयनकर्ता के रूप में परिभाषित करते हैं, कहते हैं h1, और फिर आप बाद में सोचते हैं कि चुने हुए DOM स्तर में सभी का "पहला बच्चा" लें। मैंने इसे कई बार गलत इस्तेमाल किया ... हमें :first-of-typeचयनकर्ता की आदत डालनी है और इसके प्रकार के पहले बच्चे के बारे में सोचना है ।

— काई नैक

13

:first-childपहले का चयन करता है h1 अगर और केवल अगर यह अपने मूल तत्व का पहला बच्चा है। आपके उदाहरण में, ulका पहला बच्चा हैdiv ।

छद्म वर्ग का नाम कुछ भ्रामक है, लेकिन यह बहुत स्पष्ट रूप से समझाया गया है यहाँ से कल्पना में किया गया है।

jQuery का :firstचयनकर्ता आपको वही देता है जो आप खोज रहे हैं। तुम यह केर सकते हो:

$('.detail_container h1:first').css("color", "blue");

— रोब सोबर्स
स्रोत

आपका अधिकार यह भ्रामक है, मैं मुख्य रूप से भ्रमित हो गया क्योंकि मैंने इससे पहले ऐसा करने के लिए jQuery का उपयोग किया है।

— मफिन मैन

9

उस विशेष मामले के लिए जिसका आप उपयोग कर सकते हैं:

.detail_container > ul + h1{ 
    color: blue; 
}

लेकिन अगर आपको कई मामलों पर उसी चयनकर्ता की आवश्यकता है, तो आपके पास उन लोगों के लिए एक वर्ग होना चाहिए, जैसे बोल्टकॉक ने कहा।

— Grekz
स्रोत

आपको कोई समस्या नहीं होनी चाहिए। यहां रेफरी w3.org/TR/CSS2/selector.html#child-selectors

— Grekz

6

आप भी उपयोग कर सकते हैं

.detail_container h1:nth-of-type(1)

नंबर 1 को किसी अन्य नंबर से बदलकर आप किसी अन्य एच 1 आइटम का चयन कर सकते हैं।

— फैब्रिस
स्रोत

1

आप अपने h1टैग को दूसरे में लपेट सकते हैं divऔर फिर पहला वाला होगा first-child। यह divभी शैलियों की जरूरत नहीं है। यह उन बच्चों को अलग करने का एक तरीका है।

<div class="h1-holder">
    <h1>Title 1</h1>
    <h1>Title 2</h1>
</div>

— GhostToast
स्रोत

0

तत्व सीधे <body>टैग से विरासत में नहीं मिल सकता है । आप इसे एक <dir style="padding-left:0px;"></dir>टैग में डालने का प्रयास कर सकते हैं ।

— एडमंड चाउ
स्रोत