Anleitung zum Hervorheben des ersten Absatzes

In diesem Leitfaden erfahren Sie, wie Sie den ersten Absatz innerhalb eines Containers hervorheben können.

Gestaltung des ersten Absatzes

Sie möchten den ersten Absatz größer und fett machen. Sie könnten dem ersten Absatz eine Klasse hinzufügen und ihn auf diese Weise auswählen. Die Verwendung eines Pseudo-Klassen-Selectors ist jedoch 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 Reihenfolge der Elemente ändert.

Verwendung einer Pseudo-Klasse

Eine Pseudo-Klasse wirkt so, als hätten Sie eine Klasse angewendet; jedoch wählt CSS aufgrund der Dokumentstruktur aus, anstatt einen Klassen-Selektor zu verwenden. 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 übergeordneten Elements 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, :first-child im obigen Live-Beispiel zu :last-child zu ändern, und Sie werden den letzten Absatz auswählen.

Immer wenn Sie etwas in Ihrem Dokument anvisieren müssen, können Sie prüfen, ob eine der verfügbaren pseudo-classes diese Aufgabe für Sie übernehmen kann.

Siehe auch