सीएसएस और/या एसएएसएस + (भाई) चयनकर्ता ऊपर

सीएसएस में एसबीएल के साथ एक भाई का चयन करने का कोई तरीका नहीं है अगर आउटपुट आउटपुट में ऊपर है, तो एचटीएमएल में एक पूर्व तत्व है।सीएसएस और/या एसएएसएस + (भाई) चयनकर्ता ऊपर

उदाहरण

<div class="first"> 
<div class="second"> 

.second + .first { style applied to div.first}

के लिए वहाँ वैसे भी एस.ए.एस.एस./एससीएसएस में यह करने के लिए है?

स्रोत

2013-03-06 petergus

मुझे यह देखने में बहुत आश्चर्य होगा, यह सीएसएस प्रवाह के खिलाफ चला जाता है। – hexblot

अच्छी तरह से एसएएसएस पैरेंट चयनकर्ता 'क्लास और', लेकिन मुझे लगता है कि यह कुछ और है। – petergus

बस ध्यान रखना चाहता था, एसएएसएस सीएसएस में कोई सुविधा नहीं जोड़ता है! सीएसएस एकमात्र स्टाइल भाषा ब्राउज़र समर्थन है, जब तक कि एसएएसएस किसी भी तरह से ब्राउज़र द्वारा संसाधित नहीं किया जा सकता है, यह स्पष्ट रूप से कोई सुविधा नहीं जोड़ता है (और यह नहीं)। – 0fnt

SASS सभी CSS3 चयनकर्ताओं का समर्थन करता है। भाई + उनमें से एक है। लेकिन यह कुछ अतिरिक्त विशेषताएं नहीं लाता है। इसका मतलब है कि आप

first { 
    + second { 
    font-size: smaller; 
    } 
}

कर सकते हैं लेकिन आप इसके साथ एक माता पिता ...

को प्रभावित नहीं कर सकते हैं पी.एस.: यह CSS4 :)

स्रोत

2013-03-06 21:08:19 Xavier

मैं माता-पिता को लक्षित करने की कोशिश नहीं कर रहा हूं, मैं एक भाई को लक्षित करने की कोशिश कर रहा हूं, लेकिन अगले भाई को नीचे नहीं बल्कि ऊपर। – petergus

वही उत्तर, सास यह प्रदान नहीं करता है ... आपको सीएसएस 4 – Xavier

की सुविधाओं मैं महसूस कर रही जानते हो रहा है , यह वास्तव में कष्टप्रद है। मुझे यह करने का एक त्वरित तरीका मिला।

HTML:

<div class="mainmenu"> 
    <div class="subnav"> 
    <ul> 
     <li>Whatever</li> 
    </ul> 
    </div> 
</div>

-------->

एससीएसएस: साथ

// सीएसएस div "mainmenu" के पहले बच्चे को की ओर इशारा किया गया है वर्ग "सबनाव"।

.mainmenu{ 
     & > .subnav{ 
     // Child Selector SCSS HERE 
     } 
    }

====> thgaskell, तुम मुझे गलत साबित कर दिया है :) मेरे कोड ठीक काम करता है और मैं अपने Minified कोड की 6kb खो दिया! मैंने कोड अपडेट किया है कि नीचे दी गई टिप्पणी को कैसे सूचित किया गया था।

स्रोत

2013-03-19 14:50:39 Neil

का इंतजार करना होगा अपने अंतिम उदाहरण में आप दूसरी पंक्ति को '&> .subnav' [संदर्भित माता-पिता चयनकर्ता] के साथ बदल सकते हैं (http: // sass- lang.com/docs/yardoc/file.SASS_REFERENCE.html#referencing_parent_selectors_)। – thgaskell

क्या आपने ऊपर परीक्षण किया है, अगर यह मेरी मदद करेगा .. मैं इसका परीक्षण करूंगा। लेकिन मैं वर्तमान में एक विंडोज़ मशीन पर हूं जिसमें सैस नहीं है (जैसा कि मैं कोडकिट का उपयोग करता हूं) .... – Neil

-1

मैं jquery का उपयोग कर समाप्त हुआ। काम पूरा हो जाता है :) (खेद है कि मेरे पास दूसरा कोड नहीं है क्योंकि मैं एक और मार्ग चला गया, लेकिन यह काफी सरल है, 'अगर बच्चे के पास वर्ग है तो कक्षा में जोड़ें'। :)

स्रोत

2013-03-20 09:41:54 petergus

मई या आपकी आवश्यकताओं के लिए उपयुक्त नहीं हो सकता है लेकिन आप सास/सीएसएस में सामान्य भाई चयनकर्ता का उपयोग कर सकते हैं। यह एक ही नोड स्तर पर सभी तत्वों (नहीं स्पष्ट रूप से पहले, लेकिन अभी भी काम) का चयन करेंगे:

.second { 
    .first ~ & { 
     /* styles to be applied to .second if a .first exists at the same node level */ 
    } 
}

स्रोत

2013-11-14 17:25:42

यह * केवल * * भाई बहनों का चयन करेगा * * पहले 'के बाद, नोड नोड स्तर पर सभी तत्व नहीं। –

-2

div { & + & { margin-left: 15px; background: firebrick;}}

यह यह के काम की कोशिश करो।

स्रोत

2015-11-05 07:40:42

यही वह नहीं है जो ओपी पूछ रहा है। – cimmanon

सीएसएस और/या एसएएसएस + (भाई) चयनकर्ता ऊपर

उत्तर

संबंधित मुद्दे