CSS Selector for selecting an element that comes BEFORE another element? -

इस सवाल का पहले से ही एक उत्तर है: < / P>

• 12 जवाब

मैं एक पर काम कर रहा हूँ अपनी वेबसाइट के लिए लॉगिन पेज और मैं बोल्ड बोल्ड करना चाहता हूं जो कि टेक्स्ट बॉक्स को फोकस करने पर इनपुट बॉक्स से पहले आने से पहले आता है। अभी मेरे पास निम्न मार्कअप है:

  & lt; label = "username" & gt; उपयोगकर्ता नाम: & lt; / label & gt; & Lt; input type = "textbox" id = "उपयोगकर्ता नाम" / & gt; & Lt; लेबल = "पासवर्ड" & gt; पासवर्ड: & lt; / label & gt; & Lt; इनपुट प्रकार = "टेक्स्टबॉक्स" id = "password" / & gt;  

मैं पाठ बॉक्स के बाद लेबल का चयन करने के लिए आसन्न चयनकर्ता का उपयोग कर सकता हूं, लेकिन मैं इसके पहले तत्व का चयन नहीं कर सकता। मैं इस सीएसएस चयनकर्ता नियम का उपयोग कर सकता हूं, लेकिन यह केवल उसके बाद लेबल का चयन करता है, इसलिए जब उपयोगकर्ता नाम का पाठ बॉक्स फोकस करता है, तो पासवर्ड लेबल बोल्ड हो जाता है।

  input: focus + label {font-weight : बोल्ड}  

क्या यह काम करने के लिए मैं कुछ भी कर सकता हूं? मुझे पता है कि यह आसानी से करने के लिए जावास्क्रिप्ट इस्तेमाल किया जा सकता है, लेकिन यदि संभव हो तो मैं सीएसएस आधारित समाधान का उपयोग करना चाहता हूं, मैं इसे करने का एक तरीका समझ नहीं पा रहा हूं।

यदि इनपुट लेबल से पहले था, तो 'आसन्न भाई चयनकर्ता' का उपयोग करना संभव होगा। कोड>। बस इनपुट को लेबल से पहले रखें, और फिर label से पहले इनपुट डाल देने के लिए लेआउट को संशोधित करें। यहां एक उदाहरण है:

  & lt; head runat = "server" & gt; & Lt; title & gt; & lt; / title & gt; & Lt; शैली प्रकार = "टेक्स्ट / सीएसएस" & gt; इनपुट: फ़ोकस + लेबल {फ़ॉन्ट-वजन: बोल्ड} & lt; / style & gt; & Lt; / head & gt; & LT; बॉडी & gt; & Lt; form id = "form1" runat = "server" & gt; & Lt; div शैली = "दिशा: आरटीएल" & gt; & Lt; input type = "text" id = "उपयोगकर्ता नाम" / & gt; & Lt; लेबल = "उपयोगकर्ता नाम" & gt; उपयोगकर्ता नाम: & lt; / label & gt; & Lt; / div & gt; & Lt; div शैली = "दिशा: आरटीएल" & gt; & Lt; input type = "password" id = "password" / & gt; & Lt; लेबल = "पासवर्ड" & gt; पासवर्ड: & lt; / label & gt; & Lt; / div & gt; & Lt; / प्रपत्र & gt; & Lt; / body & gt;  

(यह एक हैक की तरह है, मैं व्यक्तिगत रूप से यह करने के लिए जावास्क्रिप्ट का उपयोग करेगा)

  इनपुट: फ़ोकस + लेबल {फ़ॉन्ट-वजन: बोल्ड}  

  & lt; form Id = "form1" runat = "server" & gt; & Lt; div शैली = "दिशा: आरटीएल" & gt; & Lt; input type = "text" id = "उपयोगकर्ता नाम" / & gt; & Lt; लेबल = "उपयोगकर्ता नाम" & gt; उपयोगकर्ता नाम: & lt; / label & gt; & Lt; / div & gt; & Lt; div शैली = "दिशा: आरटीएल" & gt; & Lt; input type = "password" id = "password" / & gt; & Lt; लेबल = "पासवर्ड" & gt; पासवर्ड: & lt; / label & gt; & Lt; / div & gt; & Lt; / form & gt;