CSS, HTML und Javascript mit {stil}

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

CSS first-child

Mit den Pseudo-Selektoren first-child, last-child, first-line und first-letter gelangt CSS in das erste Kind-Element eines Containters, in die erste Zeile bzw. den ersten Buchstaben eines Textes.

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

first-child und last-child sprechen nur HTML-Elemente an und ignorieren Textknoten. 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.

Pseudo-Element oder Pseudo-Klasse

Der doppelte Doppelpunkt für Pseudo-Elemente ist neu in CSS3 und hebt den Unterschied zwischen Pseudo-Elementen und Pseudo-Klassen hervor. Die alte Syntax mit dem einfachen Doppelpunkt wird aber weiterhin von allen modernen Browsern unterstützt.

Darüber hinaus gibt es auch noch first-of-type, das ein Element spezifischer selektiert als first-child, und dazu passend auch last-of-type.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin eu augue.

Donec fringilla diam vulputate nibh luctus rutrum. Suspendisse potenti. In vitae ante.

Nunc iaculis nisl a elit. Pellentesque tristique, felis condimentum semper blandit.

<div id="textbox">
   <p> … </p>
   <p> … </p>
   <p> … </p>
</div>

#textbox p { 
   color: gray; 
   border-bottom: 4px solid gray }

#textbox p::first-letter { color: green }
#textbox p::first-child  { color: firebrick }
#textbox p::last-child   { border-bottom: none }
#textbox p::first-line   { color: darkgreen }

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 }

Das war einfach. Probieren wir etwas Aufregenderes.

Blöcke mit CSS float verteilen

Drei Boxen oder Blöcke via float:left nebeneinander, mit jeweils einem Bild und ein paar Zeilen 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 auch noch miteinander kombinieren, um den ersten Buchstaben der letzten Zeile zu erwischen.