Come seleziono ogni altro elemento di classe div utilizzando solo CSS (no js)

Grazie gentilmente per le vostre risposte in anticipo.Come seleziono ogni altro elemento di classe div utilizzando solo CSS (no js)

So come farlo utilizzando javascript e php, ma sto cercando di capire come/se è possibile farlo usando solo css.

Ho un contenitore che contiene molti articoli. Ogni oggetto ha un'immagine e sotto di essa un div contenente una descrizione. Voglio che lo sfondo della descrizione sia diverso per ogni altro elemento.

È possibile ottenere questo utilizzando solo css? Se é cosi, come? Ho scherzato con l'uso dei selettori

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

Non riesco a capirlo. Suggerimenti, commenti, qualsiasi cosa è apprezzata. Grazie ancora amici. Di seguito è riportato un codice di esempio semplificato che dimostra quello che sto succedendo.

<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>

fonte

2013-02-20 Jaime

Volete nth-child() su .item.

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

Demo:

fonte

2013-02-20 18:08:18 ThinkingStiff

Grazie mille! :) Awesome cats, haha – Jaime

Questo non funziona. Non è possibile selezionare nth-child per classe, solo per tipo di elemento. Se aggiungi un altro div a un'altra classe, le probabilità e le differenze cambieranno tutte. –

Sono d'accordo con @WalturBuerk. Ho provato questo e sono rimasto perplesso a risultati incoerenti solo per rendermi conto a volte che avevo un fratello con una classe diversa che è stata conteggiata in questo pseudo-selettore. Bummer. –

.item:nth-child(even) {...} 
.item:nth-child(odd) {...}

demo: http://jsfiddle.net/DuL24/1/

fonte

2013-02-20 18:09:13

si dovrebbe impostare nth-of-type a .Item elemento:

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;}

fonte

2013-02-20 18:13:31 starowere

Forse è possibile quando si usa questo:

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

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

puoi vedere le mie screenshots: http://screencast.com/t/17g9joVj8Z
Mi auguro che si ottiene quello che ti serve.

fonte

2013-02-20 19:09:43 Sourceforest

Come seleziono ogni altro elemento di classe div utilizzando solo CSS (no js)

risposta

Problemi correlati