Das letzte Kind-Element ansprechen

Teil des Abschnitts CSS Mastery der HTML-Journey von Coddy — Lektion 14 von 43.

Die Pseudoklasse :last-child wählt Elemente aus, die das letzte Kind ihres Elternelements sind.

Zum Beispiel:

<div class="parent">
  <p>First paragraph</p>
  <p>Middle paragraph</p>
  <p>Last paragraph</p>
</div>

Um nur den letzten Absatz zu gestalten, verwenden Sie die :last-child-Pseudoklasse:

p:last-child {
  color: red;
  font-weight: bold;
}

Nach Anwendung dieses CSS wird nur „Last paragraph“ rot und fett dargestellt, da es das letzte Kind-Element des übergeordneten div-Containers ist.

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Aufgabe

Einfach

Erstellen Sie eine CSS-Regel, um das letzte <p>-Element in einer Gruppe von Absätzen zu formatieren.

Formatieren Sie es mit einer blauen Hintergrundfarbe (#046ae0) und white Text.
Setzen Sie die Schriftstärke des letzten Absatzes auf bold.

Spickzettel

Die Pseudoklasse :last-child wählt Elemente aus, die das letzte Kind ihres Elternelements sind:

p:last-child {
  color: red;
  font-weight: bold;
}

Dies formatiert nur das letzte Absatz-Element innerhalb seines Elterncontainers.

Probier es selbst

<!DOCTYPE html>
<html>
<head>
    <title>Targeting the Last Child</title>
  <style>
    /* Write your CSS rule here */

  </style>
</head>
<body>
    <div> 
        <h2>Exploring the Universe</h2>
        <p>The universe is vast, with countless stars and galaxies waiting to be discovered.</p>
        <p>New technologies allow us to explore deeper into space, revealing its many secrets.</p>
        <p>We continue to learn more about distant planets and the possibility of life beyond Earth.</p> 
    </div>
    <div>
        <h2>The Deep Ocean</h2>
        <p>Our oceans are mysterious, covering most of Earth, yet we know so little about them.</p>
        <p>Many species live in extreme conditions, some of which are still being discovered today.</p>
        <p>Exploring the ocean depths gives us insights into life at the planet's most remote locations.</p> 
    </div>
</body>
</html>

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.