@@Schuer:

Das stimmt so nicht, denn es ist noch eine Überschrift enthalten. Also nth-of-type verwenden.

Sic! Danke für die Korrektur. Sie zeigt, wie wackelig und anfällig ein solches kontextsensitives Styling ist gegenüber einer spezifischen Auszeichnung von Elementen mit Klassen.

Sowas in der Art ist mir untergekommen:

<div class="foo">
  <div id="bar">…</div>
  <script>[code lang=javascript]$('#bar').on('click', function () { window.location.href = 'http://example.net/bar'; });

</script>   <div>…</div> </div>[/code]

Hab dann mal die JavaScript-Verlinkung durch einen richtigen Link ersetzt:

<div class="foo">
  <a href="http://example.net/bar"><div id="bar">…</div></a>
  <div>…</div>
</div>

Und schon war das zweite div nicht mehr so gestylt wie vorher, weil es per .foo div:nth-child(3) selektiert war. WTF?? Wer macht denn sowas?

:nth-child ist sinnvoll beim Abzählen gleichartiger Elemente. Niemals unterschiedliche Elemente anhand ihrer gegenwärtigen Platznummern im DOM selektieren!

Das heißt aber nicht, dass kontextsensitives Styling generell schlecht wäre. Im Gegenteil, man muss es nur sinnvoll einsetzen.

LLAP

PS: Der Hack ist temporär

<div class="foo">
  <a href="http://example.net/bar"><div id="bar">…</div></a>
  <script></script>
  <div>…</div>
</div>

WTF. :-(