CSS, HTML & Javascript mit {stil}

CSS-Selector: first-line, first-letter: erste Zeile, erstes Zeichen

first-line und first-letter sprechen keine HTML-Elemente der Webseite an, sondern die erste Zeile eines Textes bzw. den ersten Buchstaben eines Worts. Sie gehören also zu den Pseudo-Elementen, denen heute ein doppelter Doppelpunkt voran gesetzt wird.

CSS first line und first-letter für Text

first-letter

first-line und first-letter bringen typografische Extras wie größere oder farbig abgesetzte Schrift zu Teilen eines Textes, ohne dafür HTML-Elemente wie <span> einzusetzen. Beide Eigenschaften wirken nur auf Block-Elemente wie div, p oder h1, sowie auf Elemente, die mit display: block, display: inline-block, display: table als Block-Elemente dargestellt werden.

::first-line
formatiert die erste Zeile in einem Text.
::first-letter
formatiert den ersten Buchstaben eines Textes.



label.line {
    display:inline-block
}
label.line::first-letter {
    color: firebrick
}

…

<label for="" class="line">Name</label>

Erst durch display: inline-block reagiert das label-Tag auf die CSS-Eigenschaft.

first-line

Pseudo-Klassen (einfacher Doppelpunkt) und Pseudo-Elemente (doppelter Doppelpunkt) 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.

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

.textbox div:first-child::first-letter { 
    font-size: 2.6em; 
    letter-spacing: 5px;
    font-family: 'Times', serif; 
    color: orange;
    font-weight:400
}

.textbox p::first-line { 
    color: hsl(166,40%,40%); 
    font-weight: 400;
}

CSS-Stile für first-line und first-letter

Nur ein Teil der CSS-Eigenschaften kann für first-line und first-letter eingesetzt werden.

Eigenschaften der Schrift
font, font-kerning, font-style, font-variant, font-variant-numeric, font-variant-position, font-variant-east-asian, font-variant-caps, font-variant-alternates, font-variant-ligatures, font-synthesis, font-feature-settings, font-language-override, font-weight, font-size, font-size-adjust, font-stretch, font-family
Eigenschaften des Hintergrunds
background-color, background-clip, background-image, background-origin, background-position, background-repeat, background-size, background-attachment, background-blend-mode
Farbe
color
Schriftsatz
word-spacing, letter-spacing, text-decoration, text-transform, line-height
Effekte
text-shadow, text-decoration, text-decoration-color, text-decoration-line, text-decoration-style, vertical-align.
Suchen auf mediaevent.de