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.

html
<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>
css
.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