html - CSS selector which takes all label.control-label except from form with class .floating-labels -

मुझे कोड का यह टुकड़ा है:

  label.control-label {font-weight : साहसिक; } Label.control-label :: after {content: ":"; }  

जो इनपुट बोल्ड के लिए लेबल बनाता है और लेबल के बाद : जोड़ता है, और यह बहुत अच्छी तरह से काम करता है। फिर मुझे फ्लोटिंग लेबल बनाने का एक तरीका मिला: और, अन्य रूपों में व्यवहार में बदलाव को रोकने के लिए, मैं एक .floating-labels को एक फॉर्म में जोड़ता हूं और इस सीएसएस को बनाया है:

 रयान वाल्टर्स के समाधान के आधार पर  / * http://jsfiddle.net/RyanWalters/z9ymd852/ * / / * --- सामग्री फ़्लोटिंग लेबल --- * / form.floating-labels .form-group {display: flex ; ऊंचाई: 55 पीएक्स; } फ़ॉर्म। फ्लाटिंग-लेबल्स। नियंत्रण-लेबल {फ़ॉन्ट-आकार: 16px; फ़ॉन्ट-वजन: 400; अस्पष्टता: 0.4; सूचक-घटनाएं: कोई नहीं; स्थिति: पूर्ण; रूपांतरण: अनुवाद 3 डी (0, 22 पीएक्स, 0) पैमाने (1); परिवर्तन-मूल: बायां शीर्ष; संक्रमण: 240 एमएमएस; } Form.floating-labels .form-group.focused .control-label {opacity: 1; परिणत: पैमाने (0.75); } फ़ॉर्म। फ्लाटिंग-लेबल्स .फॉर्म-कंट्रोल {align-self: flex-end; } फ़ॉर्म। फ्लाटिंग-लेबल्स .फॉर्म-कंट्रोल :: - वेबकिट-इनपुट-प्लेसहोल्डर {रंग: पारदर्शी; संक्रमण: 240 एमएमएस; } फ़ॉर्म। फ्लाटिंग-लेबल्स .फॉर्म-कंट्रोल: फ़ोकस :: - वेबकिट-इनपुट-प्लेसहोल्डर {संक्रमण: कोई नहीं; } Form.floating-labels .form-group.focused .form-control :: - वेबकिट-इनपुट-प्लेसहोल्डर {color: #bbb; }  

और यह भी काम करता है और बिना फ़ॉर्म्स के साथ गड़बड़ कर देता है। फ़्लाटिंग-लेबल वर्ग, एक गलती को छोड़कर - : फ्लोटिंग लेबल में भी जोड़ा जाता है, जो थोड़ा सा अजीब लग रहा है। इसलिए मैं सीएसएस चयनकर्ता बनाना चाहता हूं जो label.control-label को फ़ॉर्म में वर्ग .floating-labels के साथ आबंटित कर लेता है। मैंने इस सीएसएस को बनाया है, लेकिन समाधान काम नहीं कर रहा है :

  label.control-label: नहीं (form.floating-labels लेबल.control-label) {font- वजन: बोल्ड; } Label.control-label: नहीं (form.floating-labels लेबल.control-label) :: के बाद {सामग्री: ":"; }  

अगर कोई मुझे सीएसएस चयनकर्ता को प्राप्त करने में मदद करता है, तो मुझे बहुत खुशी होगी, जो इन सभी को label.control-label को अंदर ले जाएगा form < / कोड> कक्षा .floating-labels के साथ - पहले से धन्यवाद कोड स्निपेट:

  label.control-label: नहीं (form.floating-labels लेबल.control-label) {font-weight: bold; } Label.control-label: नहीं (form.floating-labels लेबल.control-label) :: के बाद {सामग्री: ":"; }  

  & lt; रूप & gt; & Lt; label class = 'control-label' & gt; चाहिए था ':' और बोल्ड हो & lt; / label & gt; & LT; इनपुट & gt; & Lt; / प्रपत्र & gt; & Lt; form class = 'floating-labels' & gt; & Lt; label class = 'control-label' & gt; बोल्ड नहीं होना चाहिए & lt; / label & gt; & LT; इनपुट & gt; डायगो लोपेज के उत्तर के आधार पर & lt; / form & gt;  

समाधान :

  फ़ॉर्म: नहीं (.floating-labels) label.control-label {font-weight: bold; } प्रपत्र: नहीं (.floating-labels) label.control-label :: after {content: ":"; }  

& gt; कोड>: नहीं () आप पहले से ही उपयोग कर रहे हैं

  फ़ॉर्म: नहीं (.floating-labels) & gt; Label.control-label {font-weight: bold; } फ़ॉर्म: नहीं (.floating-labels) & gt; Label.control-label :: after {content: ":"; }