• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

:nth-child() - verschiedene Fragen

MrMurphy

Senior HTML'ler
Hallo,

ich habe ein paar Fragen zur Pseudoklasse :nth-child()

1. Wie ist die korrekte Schreibweise? In den meisten Beschreibungen wird das Pseudoelement ohne Leerzeichen hinter das Elternelement geschrieben, also z. B.

Code:
main:nth-child(2) {
...
}

Das funktioniert bei mir aber nicht:

http://foreninfo.bplaced.net/seiten_probleme/2014_04_16_nth_child_02.html

Hingegen funktioniert es, wenn ich vor dem Doppelpunkt ein Leerzeichen lasse:

Code:
main :nth-child(2) {
...
}

http://foreninfo.bplaced.net/seiten_probleme/2014_04_16_nth_child_01.html

Ich habe das mit Firefox, IE11, Chrome und Opera getestet - immer das gleiche Ergebnis.

Welche Schreibweise ist korrekt bzw. wo kann ich die korrekte Schreibweise nachlesen?

2. Kann die Anweisung von :nth-child(2n) auf das direkte Kind-Element beschränkt werden?

Ich habe zum Beispiel 6 DIV, von denen jedes zweite einen goldenen Hintergrund bekommen soll. Jedes DIV enthält wiederum weiteren Inhalt, in diesem Fall eine Überschrift und einen Absatz. Mit der Anweisung " :nth-child(2n)" bekommt auch jeweils der Absatz einen goldenen Hintergrund, da es sich um das 2. Element des DVI handelt.

Kann die nth-child-Anweisung so formuliert werden, das jeweils nur die zweiten Kindelemente von main, also in dem Beispiel jedes zweite DIV, einen goldenen Hintergrund erhält?

http://foreninfo.bplaced.net/seiten_probleme/2014_04_16_nth_child_03.html

Gruss

MrMurphy
 
Werbung:
Hallo,

ich habe ein paar Fragen zur Pseudoklasse :nth-child()

1. Wie ist die korrekte Schreibweise? In den meisten Beschreibungen wird das Pseudoelement ohne Leerzeichen hinter das Elternelement geschrieben, also z. B.

Code:
main:nth-child(2) {
...
}

Das funktioniert bei mir aber nicht:

http://foreninfo.bplaced.net/seiten_probleme/2014_04_16_nth_child_02.html

Hingegen funktioniert es, wenn ich vor dem Doppelpunkt ein Leerzeichen lasse:

Code:
main :nth-child(2) {
...
}

http://foreninfo.bplaced.net/seiten_probleme/2014_04_16_nth_child_01.html

Ich habe das mit Firefox, IE11, Chrome und Opera getestet - immer das gleiche Ergebnis.

Welche Schreibweise ist korrekt bzw. wo kann ich die korrekte Schreibweise nachlesen?

2. Kann die Anweisung von :nth-child(2n) auf das direkte Kind-Element beschränkt werden?

Ich habe zum Beispiel 6 DIV, von denen jedes zweite einen goldenen Hintergrund bekommen soll. Jedes DIV enthält wiederum weiteren Inhalt, in diesem Fall eine Überschrift und einen Absatz. Mit der Anweisung " :nth-child(2n)" bekommt auch jeweils der Absatz einen goldenen Hintergrund, da es sich um das 2. Element des DVI handelt.

Kann die nth-child-Anweisung so formuliert werden, das jeweils nur die zweiten Kindelemente von main, also in dem Beispiel jedes zweite DIV, einen goldenen Hintergrund erhält?

http://foreninfo.bplaced.net/seiten_probleme/2014_04_16_nth_child_03.html

Gruss

MrMurphy

Nein, das schreibt man schon zusammen.
Ich mag jsfiddle.net Examples viel lieber, deshalb habe ich mir das jetzt nicht genau angesehen. Auch weil die ersten zwei Beispiele meiner Meinung nach nicht vollständig sind, aber meinst du vielleicht sowas ?

Code:
main > div > p:nth-child(2)
Damit wird das p an zweiter stelle selektiert.

Oder:
Code:
main > div > *:nth-child(2)
Damit selektierst du immer das zweite Element, unabhängig vom Typ.
 
Zuletzt bearbeitet:
Hallo,

zur 1. Frage:

Nein, das schreibt man schon zusammen.

Wieso funktioniert das dann bei mir nicht?

zur 2. Frage:

Bei deinen Lösungen erhalten jeweils die Absätze den goldenen Hintergrund. Es soll aber jedes zweite DIV einen komplett goldenen Hintergrund bekommen. Das funktioniert also leider nicht.
Gruss

MrMurphy
 
Werbung:
zur 2. Frage:

Bei deinen Lösungen erhalten jeweils die Absätze den goldenen Hintergrund. Es soll aber jedes zweite DIV einen komplett goldenen Hintergrund bekommen. Das funktioniert also leider nicht.
Gruss

MrMurphy

So hatte ich es auch verstanden. Dann eben so:
Code:
main > div:nth-child(2n)

Damit wird jedes div an Stelle eines vielfachem von Zwei selektiert.

Zu 1:
Es funktioniert bei dir nicht, weil du das noch nicht richtig verstanden hast. Ging mir am Anfang auch so.
Code:
main:nth-child(2)

Anfangs hätte ich gedacht, dass das das zweite Child in main liefern würde.
Es sucht jedoch nach folgendem: Ein main als zweites Child.

HTML:
<div>
<main></main>
<main></main> <!-- Das hier -->
<main></main>
</div>
 
Zuletzt bearbeitet:
Zurück
Oben