एचटीएमएल पेड़

Question

में विशिष्ट वर्ग के गहरे तत्व प्राप्त करने के लिए सीएसएस चयनकर्ता मुझे अपने एचटीएमएल में डीआईवी तत्वों का एक गुच्छा मिला है, जिनमें से कई में अपनी कक्षा विशेषता "पंक्तियों" पर सेट है। इनमें से कुछ पंक्तियों में से एक डीआईवी को एक-दूसरे के अंदर घोंसला लगाया जा सकता है। मैं एक सीएसएस चयनकर्ता को परिभाषित करना चाहता हूं जो केवल उन घोंसलों में गहरे डीआईवी को लक्षित करता है। यही है, मैं कोई भी पंक्ति नहीं चाहता है, जिसमें कोई अन्य पंक्ति है, जिसमें कोई अन्य पंक्ति है, डीआईवी।

<div id="a" class="rowsLayout"> 
    <div id="b" class="rowsLayout" /> 
    <div id="c" class="rowsLayout"> 
    <div id="d" class="rowsLayout" /> 
    </div> 
</div> 
<div id="e" class="rowsLayout" /> 

इस संरचना के साथ, मैं एक चयनकर्ता चाहता हूं जो बी, डी, और ई को लक्षित करेगा।

क्या यह किया जा सकता है?

Answer 1

क्या आप अभिभावक वस्तुओं को "पैरेंट" जैसे अतिरिक्त वर्ग जोड़ने का विकल्प मान सकते हैं? यह आसान हो सकता है और "मानक"

Answer 2

सं

आपके विकल्प हैं है जाएगा: आईडी के आधार पर उनका चयन; उन पत्तियों के लिए एक दूसरी कक्षा जोड़ें, और उस वर्ग द्वारा चयन करें; उचित स्टाइल सेट करने के लिए जावास्क्रिप्ट-आधारित समाधान का उपयोग करें (संभवतः दूसरी कक्षा का उपयोग कर)।

Answer 3

आप या तो आप की तरह कुछ कर सकता है divs की संख्या पर निर्भर करता है:

div#b.rowsLayout,div#d.rowsLayout,div#e.rowsLayout {} 

हो सकता है कि आपकी समस्या का समाधान करने के लिए एक बेहतर तरीका है, क्या आप इन सभी divs को लागू करने के लिए कोशिश कर रहे हैं?

Answer 4

आप jQuery चयनकर्ता .rowsLayout:not(:has(.rowsLayout)) का उपयोग कर सकते हैं।

हालांकि, प्रदर्शन कारणों से, this is not possible in CSS।

आपका चयनकर्ता आपके द्वारा लक्षित तत्वों के बच्चों (या इसकी कमी) पर निर्भर करता है।
सीएसएस डिज़ाइन किया गया है ताकि तत्व के बच्चों के अस्तित्व से पहले तत्व के चयनकर्ताओं को हमेशा हल किया जा सके; यह सीएसएस को दस्तावेज़ लोड के रूप में लागू करने की अनुमति देता है।

Answer 5

क्यों उपयोग नहीं करें: खाली?

JQuery Empty

संपादित करें: यह भी एक CSS चयनकर्ता के रूप में काम करता है:

:empty { background-color: black; } 

अधिक संपादन:

:last-of-type लगभग काम करता है, लेकिन यह 'एक' किसी कारण से हो जाता है। मेरी पहेली देखें।

http://jsfiddle.net/DUdVR/3/

Answer 6

उन्हें आईडी

#b, #d, #e { 
/* styles here */ 
} 

द्वारा सभी दोहराने वर्ग के नाम btw के लिए किसी भी कारण से चुनें? आप #layout या कुछ और तो की div में पूरी बात लपेट सकता है ...

#layout div { 
/* styles */ 
} 

बजाय कभी div है कि वर्ग के नाम जोड़ने का।

Answer 7

ऐसा प्रतीत होता है कि यह संभव है: dir या: lang विशेषता का उपयोग करना।

का उपयोग करना: 2015 में लैंग बेहतर है क्योंकि यह अधिकांश ब्राउज़रों द्वारा समर्थित है।

उदाहरण:

.container { 
 
    padding:20px; 
 
} 
 

 
:lang(ar) { 
 
    direction:rtl; 
 
} 
 

 
:lang(en) { 
 
    direction:ltr; 
 
} 
 

 
.container:lang(en) { 
 
    background-color:blue; 
 
} 
 

 
.container:lang(ar) { 
 
    background-color:red; 
 
} 
 

 
.container .a:lang(en) { 
 
    background-color:orange; 
 
} 
 

 
.container .a:lang(ar) { 
 
    background-color:yellow; 
 
}

<div id="searchHere"> 
 
    
 
    <div lang=en>  
 
     <div class="container"> 
 
      l t r 
 
     <div class=a> 
 
       a 
 
     </div> 
 
     </div> 
 
     
 
     <div lang=ar> 
 
      <div class="container"> 
 
      r t l 
 
      <div class=a> 
 
       a 
 
       </div> 
 
      </div>   
 
     
 
      <div> 
 
      <div class="container"> 
 
       r t l 
 
       <div class=a> 
 
       a 
 
       </div> 
 
      </div> 
 
      
 
      <div lang=ar> 
 
       <div class="container"> 
 
        r t l 
 
        <div class=a> 
 
        a 
 
        </div> 
 
       </div> 
 
      </div> 
 
      
 
      <div lang=en>  
 
       <div class="container"> 
 
        l t r 
 
       <div class=a> 
 
       a     
 
       </div> 
 
       
 
       <div lang=ar> 
 
        <div class="container"> 
 
        r t l 
 
        <div class=a> 
 
         a      
 
         <div lang=en>  
 
         <div class="container"> 
 
          l t r 
 
          <div class=a> 
 
          a     
 
          </div> 
 
          <div> 
 
          <div> 
 
          
 
           <div lang=en>  
 
           <div class="container"> 
 
            l t r 
 
            <div class=a> 
 
            a     
 
            </div> 
 
           </div>      
 
           </div> 
 
           
 
           <div lang=ar>  
 
           <div class="container"> 
 
            r t l 
 
            <div class=a> 
 
            a     
 
            </div> 
 
           </div>      
 
           </div> 
 
           
 
          </div> 
 
          
 
          </div> 
 
         </div>      
 
         </div> 
 
        </div> 
 
       </div> 
 
       </div>    
 
      </div> 
 
      
 
      </div> 
 
     
 
     </div> 
 
     
 
    </div> 
 
    
 
</div>

हालांकि उदाहरण लीटर और RTL के साथ इस को दर्शाता है,: लैंग सिद्धांत में एक गहरी मैच के रूप में व्यवहार करने के लिए, उदाहरण के लिए का उपयोग किया जा सकता है: लैंग (गहराई से ओवरराइड-सब) हालांकि शायद यह नहीं है कि लैंग = गहराई से ओवरराइड-सभी को तत्व पर परिभाषित किया जाना चाहिए।

Answer 8

इस पर एक नज़र डालें:

div#b:first-of-type { 
style here 
}