Anleitung zum Hervorheben eines Absatzes nach einer Überschrift
In diesem Leitfaden erfahren Sie, wie Sie einen Absatz hervorheben können, der direkt nach einer Überschrift folgt.
Den ersten Absatz nach einer Überschrift stylen
Ein häufiges Muster ist, den ersten Absatz in einem Artikel anders zu gestalten als die folgenden. Üblicherweise folgt dieser erste Absatz direkt auf eine Überschrift. Wenn dies der Fall in Ihrem Design ist, können Sie diese Kombination von Elementen nutzen, um den Absatz gezielt anzusprechen.
Der direkt-nachfolgende Geschwisterkombinator
CSS verfügt über eine Gruppe von CSS-Selektoren, die als Kombinatoren bezeichnet werden, weil sie Dinge basierend auf einer Kombination von Selektoren auswählen. In unserem Fall verwenden wir den direkt-nachfolgenden Geschwisterkombinator. Dieser Kombinator wählt ein Element basierend darauf aus, dass es neben einem anderen Element steht. In unserem HTML haben wir ein h1 gefolgt von einem <p>. Das <p> ist das direkt-nachfolgende Geschwister des <h1>, sodass wir es mit h1 + p auswählen können.
<div class="wrapper">
<h1>A heading</h1>
<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 h1 + p {
font-weight: bold;
font-size: 130%;
color: rebeccapurple;
}