In einem div mit der Klasse inside

Code

div class="inside" 

stecken viele weitere div-Elemente.

Ich möchte jetzt jedes 2. und 3. vorkommende div-Element mit der Klasse schmal

Code

div class="schmal" 

ansprechen. Das gelingt mir aber nicht.


Wenn ich z.B. als Selektor folgendes wähle:

Code

div.inside div[class*="schmal"]:nth-of-type(2) {} 

spricht er keinen dieser div-Elemente an.

Wenn in Klammern 1 steht oder first-of-type, spricht er alle ersten div-Elemente innerhalb des div.schmal an.

Gibt es irgendeine Möglichkeit, wie ich das lösen kann? Sind div-Elemente keine Kinder? Mit nth-child geht gar nichts.

Hallo Bettina

Das wird mit CSS alleine nicht gehen. Es bräuchte einen "nth-of-class(n)"-Selector, den gibt's aber nicht.
Ein Ansatz wäre mit javascript (z.B. jquery-Library, ist ja heutzutage sowieso überall an Bord) ein kleines Funktiönchen zu schreiben.

Gruss, Gerd

... und da hört es leider auf bei mir. Funktiönchen kann ich nicht.

Ich stoße immer wieder auf Situationen, bei denen ich Java Script brauche - irgendwann muss ich das halt lernen - die Zeit reicht leider nicht dazu.

nth-of-class gibt es dann hoffentlich bei CSS4

Für mein Problem habe ich jetzt eine andere Lösung gefunden - das geht jetzt erst mal so.

Danke trotzdem! Es hilft ja auch, wenn ich weiß, dass ich da mit CSS nicht weiterkomme und nicht weiter experimentieren brauche.

Hallo Bettina,

ich glaube, es geht doch. Habe da mal ein bisschen gegoogelt:
http://stackoverflow.com/questions/3462298/select-every-nth-element-in-css

Schätze, Du musst nur ein n hinter deine Zahl setzen:

Code

div.inside div[class*="schmal"]:nth-child(2n) 

Probiers doch mal.

Viele Grüße,
Murphy