CSS में = "XYZ" के लिए लेबल का चयन कैसे करें?

Question

HTML:

<label for="email">{t _your_email}:</label>

सीएसएस:

label {
  display: block;
  width: 156px;
  cursor: pointer;
  padding-right: 6px;
  padding-bottom: 1px;
}

मैं लेआउट परिवर्तन करने के लिए 'फॉर' विशेषता के आधार पर लेबल का चयन करना चाहता हूं।

Answer 1

चयनकर्ता होगा label[for=email], इसलिए सीएसएस में:

label[for=email]
{
    /* ...definitions here... */
}

... या जावास्क्रिप्ट में DOM का उपयोग कर:

var element = document.querySelector("label[for=email]");

... या जावास्क्रिप्ट में jQuery का उपयोग कर:

var element = $("label[for=email]");

यह एक विशेषता चयनकर्ता है । ध्यान दें कि कुछ ब्राउज़र (उदाहरण के लिए IE <8 के संस्करण) विशेषता चयनकर्ताओं का समर्थन नहीं कर सकते हैं, लेकिन अधिक हाल के लोग करते हैं। IE6 और IE7 जैसे पुराने ब्राउज़रों का समर्थन करने के लिए, आपको दुखद रूप से एक वर्ग (अच्छी तरह से, या कुछ अन्य संरचनात्मक तरीके) का उपयोग करना होगा।

(मैं मान रहा हूं कि टेम्पलेट {t _your_email}एक क्षेत्र में भर जाएगा id="email"। यदि नहीं, तो इसके बजाय एक वर्ग का उपयोग करें।)

ध्यान दें कि यदि आपके द्वारा चुनी गई विशेषता का मान CSS पहचानकर्ता के लिए नियम के अनुकूल नहीं है (उदाहरण के लिए, यदि उसमें रिक्त स्थान या कोष्ठक हैं, या एक अंक, आदि के साथ शुरू होता है), तो आपको आसपास के उद्धरणों की आवश्यकता होगी। मूल्य:

label[for="field[]"]
{
    /* ...definitions here... */
}

वे एकल या दोहरे उद्धरण हो सकते हैं ।

Comments

मैं इसे एक वर्ग के लिए बदल देगा अर्थात 7 कंडीशंस की टिप्पणियों का उपयोग करके, फिर बढ़िया जवाब के लिए धन्यवाद!

— काइल

और अब jQuery डॉक्स का कहना है कि आपको एकल शब्दों के लिए उद्धरण चिह्नों की आवश्यकता नहीं है, इसलिए यह फिर से सीएसएस से मेल खाता है (इस संबंध में)।

— टीजे क्राउडर

हर किसी को भ्रम से बचने के लिए (मैं सिर्फ यह खुद था), के बीच कोई स्थान नहीं होना चाहिए labelऔर[for=email]

— पैडडॉक

IE8 जब तक पृष्ठ का </ DOCTYPE> घोषित होता है, तब तक चयनकर्ताओं का समर्थन करता है।

— ililinamorato

@TJCrowder मैं समझता हूं। मैं केवल इस बिंदु को स्पष्ट कर रहा था क्योंकि मैंने अभी इसका परीक्षण किया था।

— इलिनोमाटो 10

Answer 2

यदि सामग्री एक चर है, तो उद्धरण चिह्नों के साथ इसे संक्षिप्त करना आवश्यक होगा। इसने मेरे लिए काम किया। ऐशे ही:

आइटम सेलेक्ट किया गया (आईडी: संख्या) {
    कंसोल.लॉग ('लेबल समाहित है', document.querySelector ("लेबल [for = '" + id + "']"));
}