Za pomocą selektora ::first-letter możemy sprawić, że pierwsza litera tekstu znajdującego się w pierwszym wierszu interesującego nas elementu HTML zostanie umieszczona w dodatkowym pseudoelemencie.
Informacje techniczne o selektorze ::first-letter
ograniczenie - elementy HTML
Tylko element HTML typu block, typu inline-block, typu table-caption lub typu table-cell.
ograniczenie - właściwości CSS
Tylko następujące właściwości CSS: font, text-decoration, text-transform, letter-spacing, word-spacing, line-height, float, vertical-align, margin, padding, border, color, background.
Przykładowa reguła CSS, selektor ::first-letter
Wyjaśnienie przykładowej reguły CSS
p::first-letter
spraw, aby pierwsza litera tekstu znajdującego się w pierwszym wierszu każdego elementu p została umieszczona w dodatkowym pseudoelemencie oraz
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Kurs CSS</title>
<style>
p::first-letter {
color:red;
}
</style>
</head>
<body>
<div>
pierwsza litera tekstu znajdującego się w pierwszym wierszu tego elementu "div" nie została umieszczona w dodatkowym pseudoelemencie oraz nie jest koloru czerwonego, ponieważ ten element HTML nie jest elementem "p"
</div>
<p>
pierwsza litera tekstu znajdującego się w pierwszym wierszu tego elementu "p" została umieszczona w dodatkowym pseudoelemencie oraz jest koloru czerwonego, ponieważ ten element HTML jest elementem "p"
</p>
<div>
pierwsza litera tekstu znajdującego się w pierwszym wierszu tego elementu "div" nie została umieszczona w dodatkowym pseudoelemencie oraz nie jest koloru czerwonego, ponieważ ten element HTML nie jest elementem "p"
</div>
</body>
</html>
