css mit Adi Prinz

::first-letter

Das Pseudoelement ::first-letter wählt den ersten Buchstaben der ersten Textzeile eines Blockelements aus. Es eignet sich besonders für Initialbuchstaben, wie sie häufig in Zeitungen, Magazinen oder Büchern verwendet werden.

.first-letter-example::first-letter {
  float: left;
  margin-right: 0.5rem;
  color: #6f42c1;
  font-family: Georgia, serif;
  font-size: 4rem;
  font-weight: 700;
  line-height: 0.8;
}
    

Durch float: left fließt der nachfolgende Text rechts neben dem Initialbuchstaben weiter.

Eigenschaften für ::first-letter

Für ::first-letter steht nur eine begrenzte Auswahl an CSS-Eigenschaften zur Verfügung.

::first-line

Das Pseudoelement ::first-line wählt die erste dargestellte Zeile eines Blockelements aus.

Die erste Zeile dieses Absatzes wird durch das Pseudoelement hervorgehoben. Welche Wörter zur ersten Zeile gehören, hängt von der verfügbaren Breite, der Schriftgröße und dem verwendeten Endgerät ab.

.first-line-example::first-line {
  color: #6f42c1;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
    

Eigenschaften für ::first-line

Auch bei ::first-line können nicht alle CSS-Eigenschaften verwendet werden. Geeignet sind vor allem Eigenschaften zur Gestaltung von Schrift, Text und Hintergrund.

::first-letter und ::first-line kombinieren

Beide Pseudoelemente können auf denselben Absatz angewendet werden. Dadurch lässt sich der erste Buchstabe als Initiale und gleichzeitig die erste Zeile besonders gestalten.

Cascading Style Sheets trennen die Gestaltung vom strukturellen Aufbau einer Webseite. Pseudoelemente erweitern dabei die Möglichkeiten der Selektoren.

.first-text-example::first-letter {
  float: left;
  margin-right: 0.5rem;
  color: #dc3545;
  font-family: Georgia, serif;
  font-size: 4rem;
  font-weight: 700;
  line-height: 0.8;
}

.first-text-example::first-line {
  color: #6f42c1;
  font-weight: 700;
}
    

Die Eigenschaften von ::first-letter gelten speziell für den ersten Buchstaben. Die übrigen Zeichen der ersten Zeile erhalten die Gestaltung von ::first-line.

Wichtige Hinweise

• Beide Pseudoelemente werden hauptsächlich bei Blockelementen wie Absätzen eingesetzt.
• ::first-letter kann durch ein vorangestelltes Satzzeichen beeinflusst werden.
• Der Umfang von ::first-line hängt von der aktuellen Darstellung und verfügbaren Breite ab.
• Nicht alle CSS-Eigenschaften können auf diese Pseudoelemente angewendet werden.
• Der Text bleibt vollständig im HTML und ist auch ohne das CSS verständlich.

::selection

Das Pseudoelement ::selection wird aktiv, wenn der Benutzer Text beispielsweise mit der Maus oder der Tastatur markiert.

Markiere diesen Text mit der Maus. Die markierte Textstelle erhält eine violette Hintergrundfarbe und eine weiße Schriftfarbe.

.selection-example::selection {
  background-color: #6f42c1;
  color: #fff;
}
    

::selection kann auf einzelne Elemente oder auf die gesamte Seite angewendet werden.

/* Für einzelne Elemente */
.selection-example::selection {
  background-color: #6f42c1;
  color: #fff;
}

/* Für alle markierbaren Texte der Seite */
::selection {
  background-color: #6f42c1;
  color: #fff;
}
    

Eigenschaften für ::selection

Für ::selection steht nur eine begrenzte Auswahl an CSS-Eigenschaften zur Verfügung.

::marker

Das Pseudoelement ::marker wählt das Aufzählungszeichen eines Listenelements beziehungsweise die Nummer einer nummerierten Liste aus.

• HTML strukturiert den Inhalt.
• CSS gestaltet die Darstellung.
• JavaScript ergänzt das Verhalten.

.marker-list-example li::marker {
  color: #6f42c1;
  font-size: 1.4em;
}
    

Der Selektor wird auf die Listenelemente angewendet, da der Marker zu einem <li>-Element gehört.

Nummerierungen gestalten

Auch die Nummern einer geordneten Liste können mit ::marker gestaltet werden.

1. HTML-Datei erstellen
2. CSS-Datei einbinden
3. Darstellung im Browser prüfen

.marker-number-example li::marker {
  color: #dc3545;
  font-size: 1.2em;
  font-weight: 700;
}
    

Eigene Zeichen mit content

Über die Eigenschaft content kann der vorhandene Marker durch ein eigenes Zeichen oder eine kurze Zeichenfolge ersetzt werden.

• Selektor auswählen
• Pseudoelement ergänzen
• Marker gestalten

.marker-content-example li::marker {
  content: "✓  ";
  color: #198754;
  font-weight: 700;
}
    

Eigenschaften für ::marker

Auch bei ::marker ist die Auswahl der verwendbaren CSS-Eigenschaften eingeschränkt.

Eigenschaften wie margin, padding und background-color können nicht direkt auf ::marker angewendet werden.

::selection und ::marker im Vergleich