Warum funktioniert :nth-child(3n) nicht?

[Gunnar Bittersmann]

@@Carmen:

nuqneH

Ich verstehe es zwar noch immer nicht, wie gezählt wird, aber ok.

Was gibt es an „Das erstes Element der Klasse "personalImage" ist das dritte Kind seines Elternelements“ nicht zu erstehen?

Mit dem Entwicklerwerkzeug dein DOM angeschaut:

▼ <section id="salon"
  ▼ <div class="content">
    ► <h2></h2>
    ► <p class="teaser"></p>
    ► <div class="personalImage" style="background-image: url(http://placehold.it/220x220)"></div>
    ► <div class="personalImage" style="background-image: url(http://placehold.it/220x220)"></div>

Welches ist das Elternelement der Elemente der Klasse "personalImage"?
Welches ist dessen erstes Kindelement?
Welches ist dessen zweites Kindelement?

Das Problem umgehst du, wenn du – wie gesagt – die Elemente der Klasse "personalImage" gruppierst:

▼ <section id="salon"
  ▼ <div class="content">
    ► <h2></h2>
    ► <p class="teaser"></p>
    ▼ <div>
      ► <div class="personalImage" style="background-image: url(http://placehold.it/220x220)"></div>
      ► <div class="personalImage" style="background-image: url(http://placehold.it/220x220)"></div>

Mit der Liste wie du es mir geschrieben hast, verstehe ich leider ebenfalls nicht.

Und dann kannst du statt div auch sinnvoll ul/li verwenden:

▼ <section id="salon"
  ▼ <div class="content">
    ► <h2></h2>
    ► <p class="teaser"></p>
    ▼ <ul>
      ► <li class="personalImage" style="background-image: url(http://placehold.it/220x220)"></li>
      ► <li class="personalImage" style="background-image: url(http://placehold.it/220x220)"></li>

Aber es geht ja auch so.

„Geht“ hat mit „gut“ nur die Ränder gemeinsam, das essentielle Innere ist grundverschieden.

<div class="content"> ist übrigens auch überflüssig. Mit den section-Elementen darum hast du bereits einen Container.

Qapla'