CSS: first-child Selector einschließlich Textknoten

Question

Gibt es eine Möglichkeit, ein CSS-Element auszuwählen, das das erste Kind seines Elternelements ist, wenn Textknoten gezählt werden? Ich möchte den oberen Rand einer Überschrift entfernen, wenn sie oben in ihrem Elternelement steht, aber wenn ich Folgendes benutze:

#content h1 {
    margin-top: 1em;
}
#content h1:first-child {
    margin-top: 0;
}

und habe etwas HTML wie

    Dies ist etwas Text.
    Eine Überschrift
    Noch mehr Text.

wird der Rand immer noch entfernt. Gibt es einen Weg in CSS, dies zu verhindern?

Answer 1

Entfernen Sie den margin, nicht nur den margin-top, da das h1-Element das nächste Element nach unten drückt

#content h1 {
    margin-top: 1em;
}
#content h1:first-child {
    margin: 0px;
}

Demo Fiddle

Wenn Sie alle außer dem ersten entfernen möchten

#content h1:not(:first-child) {
    margin: 0px;
}

Aktualisierte Fiddle

Answer 2

In dem in den OP gegebenen Beispiel könntest du das :first-child Regel entfernen und hinzufügen

#content {
  margin-top: 1em;
}

Dies würde sich mit dem oberen Rand des h1 überlappen, wenn vor der Überschrift kein Text steht, ansonsten hätte das h1 einen separaten oberen Rand. Dann müsstest du nur den unteren Padding/Margin des vorangehenden Elements anpassen, damit dein #content entsprechend positioniert wird, oder alternativ ein ::before Pseudo-Element mit einem negativen Rand hinzufügen (der sich mit dem Container-Rand überlappt und aufhebt) um den Trick zu vollbringen:

#content:before {
  display: block;
  margin-top: -1rem;
  content: ' ';
}

Beachte, dass wenn das h1 eine andere font-size hat, dann wird 1em auch anders sein, also müsstest du das berücksichtigen oder eine feste Einheit wie rem oder px verwenden.

(Das hilft mir in meinem Fall nicht - ich möchte einen oberen Rand zu einem floatierten img hinzufügen, wenn sich etwas Text davor im enthaltenden p befindet [im von WordPress generierten Inhalt]. Aber Ränder von floatierten Elementen überlappen nicht mit ihrem Container, und die allgemeine Antwort auf die Frage ist "nein, es gibt keinen solchen Selektor.")