[GastForen Web allgemein HTML und CSS / Stylesheets CSS3: nth-child anwählen in bestimmtem div

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Themen
Beiträge
Moderatoren
Letzter Beitrag

CSS3: nth-child anwählen in bestimmtem div

sejau
Beiträge gesamt: 298

4. Sep 2011, 20:26
Beitrag # 1 von 3
Bewertung:
(3421 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
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
X

CSS3: nth-child anwählen in bestimmtem div

tvgd
Beiträge gesamt: 5

10. Okt 2011, 17:40
Beitrag # 2 von 3
Beitrag ID: #482044
Bewertung:
(3256 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
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


als Antwort auf: [#479537]

CSS3: nth-child anwählen in bestimmtem div

sejau
Beiträge gesamt: 298

10. Okt 2011, 18:35
Beitrag # 3 von 3
Beitrag ID: #482048
Bewertung:
(3246 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
ach so...
Ja dann weiss ichs jetzt ;)

Danke für die Antwort

Gruss


als Antwort auf: [#482044]

Veranstaltungskalender

Hier können Sie Ihre Anlässe eintragen, welche einen Zusammenhang mit den Angeboten von HilfDirSelbst.ch wie z.B. Adobe InDesign, Photoshop, Illustrator, PDF, Pitstop, Affinity, Marketing, SEO, Büro- und Rechtsthemen etc. haben. Die Einträge werden moderiert freigeschaltet. Dies wird werktags üblicherweise innert 24 Stunden erfolgen.

pdf-icon Hier eine kleine Anleitung hinsichtlich Bedeutung der auszufüllenden Formularfelder.

Veranstaltungen
01.12.2022

Online
Donnerstag, 01. Dez. 2022, 10.00 - 10.45 Uhr

Webinar

Die drei ColorLogic-Programme ZePrA, CoPrA und ColorAnt sind in neuen Versionen mit vielen neuen Funktionen im Jahr 2022 veröffentlich worden oder werden in Kürze veröffentlicht (ColorAnt 9). In unserem ca. 45 minütigen kostenlosen Webinar zeigen wir Ihnen einige dieser neuen Funktionen mit dem Schwerpunkt auf Automatisierung und Produktivitätssteigerungen.

Ja

Organisator: Impressed GmbH

Kontaktinformation: Silvia Noack, E-Mailsnoack AT impressed DOT de

https://www.impressed.de/schulung.php?c=sDetail&sid=311

ColorLogic Update-Webinar ZePrA 10, CoPrA 9 und ColorAnt 9
Veranstaltungen
02.02.2023

Prozesse optimieren und effizient gestalten

Zürich
Donnerstag, 02. Feb. 2023, 08.00 - 10.00 Uhr

Digitalisierung, Webauftritt

Digitalisierung mitgestalten - Worauf kommt es an? Wie wichtig ist die Webseite? Webseite mit Word Press? Interne Prozesse optimieren

Ja

Organisator: B. Isik - SNF Academy

Kontaktinformation: Birol Isik, E-Mailinfo AT bkcc DOT ch

https://digitalisierung-heute.ch/digitalisierung-informationstag-schweiz/