Wie wähle ich jedes andere Div Klassenelement mit nur CSS (keine js)

Vielen Dank für Ihre Antworten im Voraus.Wie wähle ich jedes andere Div Klassenelement mit nur CSS (keine js)

Ich weiß, wie diese mit Hilfe von JavaScript und PHP zu tun, aber ich versuche, wie/zu lernen, wenn es möglich ist, dies nur mit CSS zu tun.

Ich habe einen Behälter, der viele Gegenstände enthält. Jedes Element hat ein Bild und darunter ein Div mit einer Beschreibung. Ich möchte, dass der Hintergrund der Beschreibung für jeden anderen Gegenstand unterschiedlich ist.

Ist es möglich, dies nur mit CSS zu erreichen? Wenn das so ist, wie? Ich habe herumalbern mit der Verwendung der Selektoren

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

Ich kann nicht scheinen, es zu bekommen. Vorschläge, Kommentare, alles wird geschätzt. Danke nochmal Freunde. Unten ist ein vereinfachter Beispielcode, der zeigt, was ich vorhabe.

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

Quelle

2013-02-20 Jaime

Sie wollen nth-child() auf .item.

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

Demo:

Quelle

2013-02-20 18:08:18 ThinkingStiff

Vielen Dank! :) Tolle Katzen, haha – Jaime

Dies funktioniert nicht. Sie können nth-child nicht nach Klasse, sondern nur nach Elementtyp auswählen. Wenn du ein weiteres Div mit einer anderen Klasse hinzufügst, werden alle Quoten und Evens verschoben. –

Ich stimme @WalturBuerk zu. Ich habe das versucht und war bei inkonsistenten Ergebnissen perplex, nur um zu erkennen, dass ich manchmal ein Geschwister mit einer anderen Klasse hatte, die in diesem Pseudo-Selektor gezählt wurde. Bummel. –

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

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

Quelle

2013-02-20 18:09:13

Sie sollten eingestellt n-of-type Element .Item:

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

Quelle

2013-02-20 18:13:31 starowere

Vielleicht ist es möglich, wenn wir verwenden diese: http://screencast.com/t/17g9joVj8Z
Ich hoffe, Sie bekommen, was Sie brauchen:

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

oder

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

Sie können meine Screenshots sehen.

Quelle

2013-02-20 19:09:43 Sourceforest

Wie wähle ich jedes andere Div Klassenelement mit nur CSS (keine js)

Antwort

Verwandte Themen