:nth-child / :nth-of-type und Klassen

UnnamedProphet · #1 (**permalink**) 16.03.2011, 17:22

Hallo,
wenn ich folgenden Code habe

HTML-Code:

<div id="eins">
	<div class="breit"></div>
	<div class="schmal"></div>
	<div class="schmal"></div>
	<div class="schmal"></div>
	<div class="schmal"></div>
	<div class="schmal"></div>
	<div class="schmal"></div>
</div>

und von den divs mit der Klasse "schmal" jedes dritte auswählen will, würde müsste ich die divs ja nach der Klasse auswählen, was etwa so aussehen müsste:

HTML-Code:

#eins div.schmal:nth-child(3n+1) {
	...
}

Bei mir wird die Klasse jedoch nicht angenommen. Es werden alle divs gezählt, unabhängig von den zugewiesenen Klassen.
Habe ich irgend einen Fehler gemacht oder ist das richtig so?

Bislang habe ich mir mit:

HTML-Code:

<style type="text/css">
#eins span:nth-of-type(3n+1) {
	...
}
</style>

<div id="eins">
	<span class="breit"></span>
	<div class="schmal"></div>
	<div class="schmal"></div>
	<div class="schmal"></div>
	<div class="schmal"></div>
	<div class="schmal"></div>
	<div class="schmal"></div>
</div>

ausgeholfen.
Ich fände es jedoch besser, wenn man sich dazu der Klassen bedienen kann.
Gibt es da eine Möglichkeit oder ist das nicht so gedacht?

Danke

Chris2011 · #2 (**permalink**) 16.03.2011, 17:54

ich kann dir sagen wie du es mit jQuery machst

Nur mit CSS geht das meiner Meinung nicht. Da musst du den noch id´s geben

UnnamedProphet · #3 (**permalink**) 16.03.2011, 18:12

Ich suche eigentlich nach einer Lösung die kein JS erfordert.

Wenn ich den einzelnen divs ids geben würde, wäre der Sinn des automatischen Zählens dahin. Ich könnte dann genau so gut den gewünschten divs eine zweite Klasse zuordnen.

gato · #4 (**permalink**) 16.03.2011, 18:26

Zitat:

Zitat von Chris2011

Da musst du den noch id´s geben

Mit id´s gehts sicher nicht. Und auch IDs sind nicht nötig.

Dein Fehler ist leider ein Denkfehler. :nth-child und :nth-of-type zählen immer alle Kindelemente bzw alle Elemente eines Typs. Selektiert werden die Elemente jedoch nur wenn weitere Bedingungen erfüllt sind.

Am besten versuchst du Selektoren von rechts nach links zu lesen:

div.schmal:nth-child(3n+1) liest sich also: Selektiere jedes dritte Kindelement, (aber nur) wenn es sich um ein div-Element mit der Klasse schmal handelt.

Anhand deines Quelltextaufbaus und der uninformativen Klassennamen wage ich eine Vermutung: Du willst eine Liste mit einer Übschrift. Dann würde ich dir raten: eines der sechs Überschriftenelemente (h1 bis h6) sowie eine geordnete oder ungeordnete Liste (ol bzw. ul mit li-Kindern).

cebito · #5 (**permalink**) 16.03.2011, 18:27

Ich weiß nicht, wo dein Problem ist, aber bei mir werden nur die divs mit Klasse berücksichtigt...

HTML-Code:

<!doctype html>
<html>

<head>
	<title>Titel</title>

	<meta charset="UTF-8" />
	<meta name="description" content="" />
	<meta name="author" content="" />
	<meta name="keywords" content="" />
<style type="text/css">
#eins div.schmal:nth-child(3n+1) {
background:#f00;
}</style>
</head>

<body>
<div id="eins">
	<div class="breit">breit</div>
	<div class="schmal">test</div>
	<div class="schmal">test</div>
	<div class="schmal">test</div>
	<div>test</div>
	<div>test</div>
	<div>test</div>
	<div>test</div>
	<div>test</div>
	<div>test</div>
	<div class="schmal">test</div>
	<div class="schmal">test</div>
	<div class="schmal">test</div>
	<div class="schmal">test</div>
	<div class="schmal">test</div>
	<div>test</div>
	<div>test</div>
	<div>test</div>
	<div>test</div>
	<div class="schmal">test</div>
	<div class="schmal">test</div>
	<div class="schmal">test</div>
	<div class="schmal">test</div>
	<div class="schmal">test</div>
	<div class="schmal">test</div>
	<div class="schmal">test</div>
	<div class="schmal">test</div>
	<div class="schmal">test</div>
	<div class="schmal">test</div>
	<div class="schmal">test</div>
</div>
</body>
</html>

gato · #6 (**permalink**) 16.03.2011, 18:36

Zitat:

Zitat von cebito

Ich weiß nicht, wo dein Problem ist, aber bei mir werden nur die divs mit Klasse berücksichtigt...

Füg am Anfang nochmal ein div mit Klasse breit ein, dann siehst du, dass du hier nur zufällig die richtigen Ergebnisse erhalten hast.

cebito · #7 (**permalink**) 16.03.2011, 18:59

Aah, danke, man lernt nie aus

UnnamedProphet · #8 (**permalink**) 16.03.2011, 22:47

Zitat:

Zitat von gato

Anhand deines Quelltextaufbaus und der uninformativen Klassennamen wage ich eine Vermutung: Du willst eine Liste mit einer Übschrift. Dann würde ich dir raten: eines der sechs Überschriftenelemente (h1 bis h6) sowie eine geordnete oder ungeordnete Liste (ol bzw. ul mit li-Kindern).

Also ich habe mein Ziel jetzt mal veranschaulicht:

Hier die programmierte Version dazu:
http://www.prophet-design.de/temp/nth-test.html

Zitat:

Zitat von gato

div.schmal:nth-child(3n+1) liest sich also: Selektiere jedes dritte Kindelement, (aber nur) wenn es sich um ein div-Element mit der Klasse schmal handelt.

Genau das ist das was ich will, allerdings wird der Teil "mit der Klasse schmal" ingnoriert, wie man in der programmierten Version sieht.
Wenn er nur die divs mit der Klasse "schmal" zählen würde, wäre der Block unter dem breiten div genau so formatiert, wie in der oberen Version.
Der breite Block wird jedoch mitgezählt.

gato · #9 (**permalink**) 17.03.2011, 17:26

Zitat:

Zitat von UnnamedProphet

Also ich habe mein Ziel jetzt mal veranschaulicht:

Also eine Tabelle mit und ohne Überschrift (caption)?

Wenn die beiden beispiele genau so vorkommen sollen, kannst du entweder eine ID "zwei" vergeben und für diese eben andere Regeln erstellen (4n+1?) oder uns mitteilen, welche Inhalte du darstellen möchtest. Dann wissen wir welche Elemente du brauchst und ob sich dein Problem allein dadurch schon lösen lässt.

Zitat:

Zitat von UnnamedProphet

Hier die programmierte Version dazu:
http://www.prophet-design.de/temp/nth-test.html

Programmier ist hier nichts

Zitat:

Zitat von UnnamedProphet

Genau das ist das was ich will, allerdings wird der Teil "mit der Klasse schmal" ingnoriert, wie man in der programmierten Version sieht.
Wenn er nur die divs mit der Klasse "schmal" zählen würde, wäre der Block unter dem breiten div genau so formatiert, wie in der oberen Version.
Der breite Block wird jedoch mitgezählt.

Nein, nein. Du willst, dass nur die Elemente mit der Klasse schmal gezählt werden. Das ist etwas anderes.

andir · #10 (**permalink**) 17.03.2011, 17:46

Ohne es genau herausgelesen zu haben:

Selectors Level 3

geht es m.E. bei "nth-of-type" nur um das Element, nicht um den (Klassen)Selektor. Der wird offenbar ignoriert. Folglich wird dein Bemühen hier keinen Erfolg haben.

Ersatzweise könntest Du es mal mit .schmal ohne div-Bezeichner versuchen (der dann überflüssig wäre). (Ih glaube nicht an einen Erfolg, aber schön wärs ja)

Was bleibt, ist, das Element mit der Klasse breit auszutauschen, z.B. durch ein span, das als Blockelement gesetzt ist. nth-of-type würde in diesem Fall das span nicht mitzählen und so funktionieren wie gewünscht.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Xampp murrt	Schelm.isch	Serveradministration und serverseitige Scripte	2	23.06.2008 18:11
Liste im IE	StarSt0rm	CSS	3	22.08.2007 20:04