CSS, HTML und Javascript mit {stil}

CSS first-child, last-child, first-line, first-letter

CSS first-child last-child für Elemente, first-line, first-letter für Text

Mit den Pseudo-Klassen :first-child, :last-child gelangt CSS in das erste Kind-Element eines Containers, in die erste Zeile bzw. den ersten Buchstaben eines Textes.

first-child und last-child sprechen nur HTML-Elemente an, die das erste Kind ihres Eltern-Elements sind – z.B. das erste li in einem ul.

Die Pseudo-Elemente ::first-line und ::first-letter zielen auf den Text in einem HTML-Element.

:first-child
selektiert das erste Kind eines Elternelements – gleich, um welchen Typ von Element es sich handelt.
:last-child
selektiert das letzte Kind eines Elternelements – gleich, um welchen Typ von Element es sich handelt.
::first-line
formatiert die erste Zeile in einem Text.
::first-letter
formatiert den ersten Buchstaben eines Textes.

Insbesondere dynamisch erzeugten Elementen – also CMS-Systemen – kommt es entgegen, das sich ein erstes oder letztes Kind-Element per CSS ohne zusätzliche Klassen oder Id auswählen und formatieren läßt.

Unterschied zwischen first-child und first-of-type

Neben first-child gibt es auch noch first-of-type, das ein Element spezifischer selektiert als first-child, und dazu passend auch last-of-type. Das Beispiel stellt den Unterschied zwischen first-child und first-of-type bzw. last-child und last-of-type heraus:

Der zweifelhafte Fremde

Als es klingelte nachts, es war kurz vor halb zehn, wurde niemand erwartet und niemand gesehn.

Doch dann sahn sie auf einer Urne zuletzt eine fremde Erscheinung und waren entsetzt.

Plötzlich sprang sie hinunter und rannte ins Haus und seither brachte niemand den Gast mehr hinaus.

Aus: Der zweifelhafte Fremde von Edward Gorey

<div class="textbox">
    <div>Der zweifelhafte Fremde</div> // first-child first-of-type
    <p>Als es klingelte nachts ….</p>  // first-of-type
    <p>Doch dann sahn sie ….</p>
    <p>Plötzlich sprang sie ….</p>     // last-child
</div>

.textbox { 
    background: hsl(166,40%,98%);
}
.textbox div:first-child {
    font-size: 1.5em; 
    border:none;
}
.textbox div:first-child::first-letter {
    font-size: 2em;  
    float: left;
}
.textbox div, .textbox p { 
    color: #888;
    border-bottom: 2px dotted #ccc;
}
.textbox p::first-line {
    color: hsl(166,40%,40%);
}
.textbox p:last-child {
    border: none
}

Pseudo-Klassen und Pseudo-Elemente können aneinander gereiht und kombiniert werden: So entsteht die große Initiale mit CSS .textbox div:first-child::first-letter. Pseudo-Klassen können allerdings nur am Ende der Selektor-Kette stehen.

first-child / last-child

In einer klassischen Breadcrumb-Navigation formatiert last-child das letzte Element der Liste gesondert – ohne den Balken am Ende.

#breadcrumb li { border-right: 12px solid silver }
#breadcrumb li:first-child { font-weight: 600 }
#breadcrumb li:last-child { border-right: none }

Da sich Pseudo-Klassen gut kombinieren können, funktioniert auch der Ausschluss in langen Listen. first-child und last-child lassen sich z.B. mit dem Keyword :not kombinieren.

li { 
    background: red;
}
li:first-child, li:last-child { 
    background: white;
} 

oder 

li { 
    background: white;
}
li:not(:first-child):not(:last-child) {
    background: red;
}

Das war einfach. Probieren wir etwas Aufregenderes.

Blöcke mit CSS float verteilen

Drei Boxen oder Blöcke nebeneinander – mit jeweils einem Bild und ein paar Zeilen Text – sind die typischen Produktlabel.

Damit sie sich über die gesamte Breite ihres Containers erstrecken, gilt für alle Boxen float: left, aber der letzte Block bekommt dank last-child ein float: right.

Die letzte Box bekommt mit last-child ein margin-right:0, damit sie keinen Abstand vom rechten Rand hält.

Feuerrot
für Abenteurer
#dc143c
Crimson
Kornblume
passt zu Allem
#6495ed
Cornflower
Sanftes Grün
Wellness
#8Fbc8F
Seagreen

Das funktioniert mit minimalen Aufwand an CSS-Klassen, so dass dieses Layout schnell auf mehr als drei Blöcke angewendet werden kann.

<div id="fbox">
    <div class="fcol">
        <div><img … ></div>
        <div>Feuerrot<br>für Abenteurer</div>
        <div>#dc143c</div>
        <div>Crimson</div>
    </div>
    …
</div>

#fbox { background-color: gainsboro }
.fcol { border:1px solid silver; float:left; margin-right: 12px; background-color: white }
.fcol:last-child { margin-right: 0; float:right}

.fcol div { border-bottom: 2px solid gainsboro }
.fcol div:first-child { border: none }
.fcol div:last-child { border:none }

.fcol div::first-line { font-weight: 600; color:gray}
.fcol div:last-child::first-letter { color:darkorange}

Am Ende lassen sich last-child und first-letter miteinander kombinieren, um den ersten Buchstaben der letzten Zeile zu erwischen.

first-child first-letter