p:nth-child(odd) zählt <h3> mit

[Linuchs]

Hallo,

wegen der verbesserten Lesbarkeit eines Textes möchte ich jeden zweiten Absatz einrücken:

p:nth-child(odd) {  
  color: #484;  
  margin-left: 1em;  
}  

Diese Regel soll nach jeder Zwischenüberschrift neu beginnen, das funktioniert so nicht. Im Gegenteil: Die <h3> Zeile wird mitgezählt, als ob sie <p> wäre.

Habe recherchiert, aber zu dieser Problematik nichts gefunden.

Linuchs

[1UnitedPower]

Meine Herren!

Diese Regel soll nach jeder Zwischenüberschrift neu beginnen, das funktioniert so nicht. Im Gegenteil: Die <h3> Zeile wird mitgezählt, als ob sie <p> wäre.

Nein, die h3-Zeile wird mitgezählt, als wäre sie ein nth-child ;)

Ausgehend von folgendem Markup, könntest du nth-of-type verwenden:

<section>  
   <h3>Überschfift 1</h3>  
   <p>…</p>  
   <p>…</p>  
   <p>…</p>  
   <p>…</p>  
</section>  
<section>  
   <h3>Überschfift 1</h3>  
   <p>…</p>  
   <p>…</p>  
   <p>…</p>  
   <p>…</p>  
</section>

section p:nth-of-type(odd){  
   /* … */  
}

Wenn es die section-Elemente nicht gibt, dann fiele mir auch keine reine CSS-Lösung ein.

[ChrisB]

Hi,

wegen der verbesserten Lesbarkeit eines Textes möchte ich jeden zweiten Absatz einrücken:
p:nth-child(odd) { … }

Diese Regel soll nach jeder Zwischenüberschrift neu beginnen, das funktioniert so nicht. Im Gegenteil: Die <h3> Zeile wird mitgezählt, als ob sie <p> wäre.

Du hast schlicht und einfach nicht verstanden, was :nth-child ist.

Wenn deine Eltern vor dir zwei Söhne und eine Tochter hatten, in der Reihenfolge – dann bist du trotzdem das vierte *Kind*, die Zählung beginnt nicht abhängig vom Geschlecht neu.

Wenn du das nur auf die einer Zwischenüberschrift folgenden Elemente bezogen sehen willst – dann musst du zunächst dafür sorgen, dass diese Zwischenüberschrift und ihre nachfolgenden Elemente ein gemeinsames, nur sie gruppierendes Elternelement bekommen.

MfG ChrisB