Anleitung zum Hervorheben des ersten Absatzes
In diesem Leitfaden erfahren Sie, wie man den ersten Absatz innerhalb eines Containers hervorhebt.
Styling des ersten Absatzes
Sie möchten den ersten Absatz größer und fett darstellen. Sie könnten dem ersten Absatz eine Klasse hinzufügen und ihn auf diese Weise auswählen, jedoch ist die Verwendung eines Pseudo-Klassen-Selectors flexibler — das bedeutet, dass Sie den Absatz basierend auf seiner Position im Dokument anvisieren können, und Sie müssen die Klasse nicht manuell verschieben, wenn sich die Quellreihenfolge ändert.
Verwendung einer Pseudo-Klasse
Eine Pseudo-Klasse
wirkt, als hätten Sie eine Klasse angewendet; jedoch wählt CSS anstelle eines Klassen-Selectors basierend auf der Dokumentstruktur aus. Es gibt eine Reihe verschiedener Pseudo-Klassen, die unterschiedliche Dinge auswählen können. In unserem Fall werden wir :first-child
verwenden. Dies wählt das Element aus, das das erste Kind eines Elternteils ist.
<div class="wrapper">
<p>
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
daikon amaranth tatsoi tomatillo melon azuki bean garlic.
</p>
<p>
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
Dandelion cucumber earthnut pea peanut soko zucchini.
</p>
</div>
.wrapper p:first-child {
font-weight: bold;
font-size: 130%;
}
Sie können versuchen, im obigen Live-Beispiel :first-child
in :last-child
zu ändern, und Sie werden den letzten Absatz auswählen.
Wann immer Sie etwas in Ihrem Dokument anvisieren müssen, können Sie überprüfen, ob eine der verfügbaren pseudo-classes
dies für Sie tun kann.
Siehe auch
- Die Referenzseite zu
pseudo-classes
. - Learn CSS: Pseudo-classes and pseudo-elements.