Hallo zusammen.

Ich möchte in einem div pro linie je 3 bilder anzeigen mit einem bestimmten abstand (margin-right).
für alle bilder habe ich per css einen margin rechts definiert.

leider wird das letzte bild, da dort ja auch ein margin definiert ist, nun auf die nächste linie gesetzt. also möchte ich rechts den margin nicht mehr haben.

ich dachte nun, dass mit css3 und den neuen pseudo-klassen eine einfache lösung bereitsteht.

siehe zb hier:

http://www.elmastudio.de/...child-und-nth-child/

Code

<div id="item-container"> 
        <div id="thumbs_holder"> 
		<div class="item"> 
		<img src=img/isotope-images/image_1.jpg> 
		</div> 
	</div> 
	<div id="thumbs_holder"> 
		<div class="item"> 
		<img src=img/isotope-images/image_2.jpg> 
		</div> 
	</div> 
	<div id="thumbs_holder"> 
		<div class="item"> 
		<img src=img/isotope-images/image_3.jpg> 
		</div> 
	</div> 
	<div id="thumbs_holder"> 
		<div class="item"> 
		<img src=img/isotope-images/image_5.jpg> 
		</div> 
	</div> 
	<div id="thumbs_holder"> 
		<div class="item"> 
		<img src=img/isotope-images/image_4.jpg> 
		</div> 
	</div> 
	<div id="thumbs_holder"> 
		<div class="item"> 
		<img src=img/isotope-images/image_6.jpg> 
		</div> 
	</div> 
</div> 

nun wollte ich jedes 3. child im item-container-div ansprechen.
klappt jedoch einfach nicht...

ich habs mit:

Code

#item-container:nth-child (3n) { 
    border-width: 4px; 
    border-color:green; 
} 

wie auch mit:

Code

div#item-container:nth-child(3n){ 
... 
} 

probiert.

aber ich sehe einfach keine änderung.

und ja mein safari sowie mein chrome unterstützen css3 schon. sollte also nicht an dem liegen.
oder muss man das irgendwo aktivieren? nicht oder?

ich weiss einfach nicht wie ich da jedes 3 div mit der klasse
thumbs-holder ansprechen möchte.

(übrigens; ich habe diesen holder gemacht, weil dort dann auch noch text und nicht nur bilder reinsollen. aber das zum gegebenen zeitpunkt...)

ich hoffe jemand kann mir da weiterhelfen, wo der knoten ist. vll spreche ich da syntaxmässig die falschen childs an..
keine Ahnung.

Vielen Dank für Tipps.

Gruss

sejau

Die Pseudoklasse bezieht sich auf das Element selber, also in deinem Fall .thumbs-holder (es muss btw. eine Klasse sein, da es mehrmals vorkommt).

Code

.thumbs-holder:nth-child(3n) {  
    margin-right: 0; 
} 

gruss tv

ach so...
Ja dann weiss ichs jetzt ;)

Danke für die Antwort

Gruss