2013-02-20 36 views
31

का उपयोग करके हर दूसरे div वर्ग तत्व का चयन कैसे करूं, कृपया आपके जवाबों के लिए कृपया अग्रिम धन्यवाद।मैं केवल सीएसएस (कोई जेएस)

मुझे पता है कि जावास्क्रिप्ट और PHP का उपयोग करके इसे कैसे किया जाए, लेकिन मैं सीखने की कोशिश कर रहा हूं कि कैसे सीएसएस का उपयोग करके ऐसा करना संभव है।

मेरे पास एक कंटेनर है जिसमें कई आइटम हैं। प्रत्येक आइटम में एक तस्वीर होती है, और इसके नीचे, एक div जिसमें वर्णन होता है। मैं विवरण की पृष्ठभूमि हर दूसरे आइटम के लिए अलग होना चाहता हूं।

क्या यह केवल सीएसएस का उपयोग करके इसे हासिल करना संभव है? यदि हां, तो कैसे? मैं चयनकर्ताओं का उपयोग करने के साथ चारों ओर बेवकूफ़ बना रहा हूं

.item:nth-child(odd){background-color:red} 
.item .description:nth-of-type(odd){background-color:orange;} 

मुझे यह प्रतीत नहीं होता है। सुझाव, टिप्पणियां, कुछ भी सराहना की है। धन्यवाद दोस्तों फिर से। नीचे कुछ सरल नमूना कोड है जो दर्शाता है कि मैं क्या कर रहा हूं।

<style> 
#container{width:100% height:100%;} 
.item {float:left; width:250px; height:700px;} 
.item img {width:250px; height:250px; float:left;} 
.description {width:250px; height:450px; float:left; background-color:blue;} 
.description:nth-of-type(even){background-color:red;}  // <- Here's the line!! 
</style> 

<html> 
<body> 
    <div id="container"> 
    <div class="item">  //item 1 
    <img src="image.jpg"/> 
    <div class="description"> //This (and every odd number) I want to be blue 
    <h1>Title</h1> 
    <h2>Sub Title</h2> 
    <p>Lorem Ipsum dolor sit for Adun!</p> 
    <a href="#">::LEARN MORE::</a> 
    </div> 
    </div> 
    <div class="item">  //item 2 and so on... 
    <img src="image.jpg"/> 
    <div class="description"> //and this (and every even number, red) 
    <h1>Title</h1> 
    <h2>Sub Title</h2> 
    <p>Lorem Ipsum dolor sit for Adun!</p> 
    <a href="#">::LEARN MORE::</a> 
    </div> 
    </div> 
    </div> 
<body> 
</html> 

उत्तर

42

आप .item पर nth-child() चाहते हैं।

.item:nth-child(odd) .description { 
    background-color: red; 
} 

डेमो:jsFiddle

+0

आपको बहुत बहुत धन्यवाद! :) बहुत बढ़िया बिल्लियों, हाहा – Jaime

+3

यह काम नहीं करता है। आप केवल कक्षा प्रकार के द्वारा कक्षा द्वारा एनएच-बच्चे का चयन नहीं कर सकते हैं। यदि आप किसी अन्य वर्ग के साथ एक और div जोड़ते हैं तो बाधाएं और शाम सभी बदल जाएंगे। –

+0

मैं @WalturBuerk से सहमत हूं। मैंने यह कोशिश की है और असंगत परिणामों पर परेशान था केवल कभी-कभी यह महसूस करने के लिए कि कभी-कभी मुझे एक अलग वर्ग के साथ भाई मिलती थी जिसे इस छद्म चयनकर्ता में गिना जाता था। ओह। –

0

आप वें के- प्रकार तत्व .item करने के लिए सेट करना चाहिए:

0,123,
#container{width:100% height:100%;} 
.item {float:left; width:250px; height:700px;} 
.item img {width:250px; height:250px; float:left;} 
.description {width:250px; height:450px; float:left; background-color:blue;} 
.item:nth-of-type(even) .description {background-color:red;} 
2

हो सकता है कि यह संभव है जब हम का उपयोग करें: http://screencast.com/t/17g9joVj8Z
मुझे आशा है कि आप आप अपनी ज़रूरत की चीज़ों:

.item:nth-of-type(odd) .description{background-color:orange;} 

या

.item:nth-child(odd) .description{background-color:orange;} 

तुम मेरे स्क्रीनशॉट देख सकते हैं।

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