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

Seite 1 von 2

40 Beiträge dieses Themas auf einer Seite anzeigen

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - :nth-child / :nth-of-type und Klassen (http://xhtmlforum.de/showthread.php?t=64104)

UnnamedProphet

16.03.2011 17:22

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

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

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

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	16.03.2011 18:26

Zitat:

Zitat von Chris2011 (Beitrag 490133)

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

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	16.03.2011 18:36

Zitat:

Zitat von cebito (Beitrag 490137)

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

16.03.2011 18:59

Aah, danke, man lernt nie aus ;)

UnnamedProphet

16.03.2011 22:47

Zitat:

Zitat von gato (Beitrag 490135)

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:
http://dl.dropbox.com/u/81328/nth-child.gif

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

Zitat:

Zitat von gato (Beitrag 490135)

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	17.03.2011 17:26

Zitat:

Zitat von UnnamedProphet (Beitrag 490148)

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 (Beitrag 490148)

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

Programmier ist hier nichts ;)

Zitat:

Zitat von UnnamedProphet (Beitrag 490148)

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

andir

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.

Alle Zeitangaben in WEZ +2. Es ist jetzt 18:44 Uhr.

Seite 1 von 2

40 Beiträge dieses Themas auf einer Seite anzeigen