[ aktualizacja 23.12.2000 ]
a. Pseudoelement first-lineSelektor pozwala nadać odrębne formatowanie pierwszemu wierszowi bloku, np. akapitu.
Przykład:
P:first-line {text-transform: uppercase}
To jest akapit, w którym pierwszy wiersz będzie zamieniony na wersaliki. To jest akapit, w którym pierwszy wiersz będzie zamieniony na wersaliki. Proszę zauważyć, że zawartość pierwszego wiersza zmienia się przy zmianie wielkości ramki.
Interpretacja: Internet Explorer 5.5, Netscape 6, Opera 5.
W deklaracji stylu dla :first-line można stosować następujące własności: font properties, color properties, background properties, 'word-spacing', 'letter-spacing', 'text-decoration', 'vertical-align', 'text-transform', 'line-height', 'text-shadow', 'clear'.
To jest akapit, w którym pierwszy wiersz będzie pogrubiony i pochylony. To jest akapit, w którym pierwszy wiersz będzie pogrubiony i pochylony. To jest akapit, w którym pierwszy wiersz będzie pogrubiony i pochylony. Proszę zauważyć, że zawartość pierwszego wiersza zmienia się przy zmianie wielkości ramki.
b. Pseudoelement first-letterSelektor :first-letter teoretycznie powinien powodować nadanie odrębnego formatowania pierwszej literze danego bloku, np. akapitu. Został on pomyślany przede wszystkim jako wygodne narzędzie o charakterze typograficznym, pozwalające zbliżyć wygląd strony WWW do tradycyjnych rozwiązań spotykanych w publikacjach papierowych, np. rozciągnięcie pierwszej litery na kilka kolejnych wierszy tekstu. Technika ta (drop-cap) jest znana choćby z popularnych edytorów tekstów.
Przykład:
P:first-letter { font-size: 200%; float: left }
Pierwsza litera w tym akapicie jest różna od pozostałych. Pierwsza litera w tym akapicie jest różna od pozostałych. Pierwsza litera w tym akapicie jest różna od pozostałych. Pierwsza litera w tym akapicie jest różna od pozostałych. Pierwsza litera w tym akapicie jest różna od pozostałych.
Interpretacja: Internet Explorer 5.5, Netscape 6, Opera 5.
W deklaracji stylu dla :first-letter można stosować następujące własności: font properties, color properties, background properties, 'text-decoration', 'vertical-align', 'text-transform', 'line-height', margin properties, padding properties, border properties, 'float', 'text-shadow', and 'clear'.
Pierwsza litera w tym akapicie jest różna od pozostałych. Pierwsza litera w tym akapicie jest różna od pozostałych. Pierwsza litera w tym akapicie jest różna od pozostałych. Pierwsza litera w tym akapicie jest różna od pozostałych. Pierwsza litera w tym akapicie jest różna od pozostałych.
c. Pseudoelement :before i :afterSelektor ten pozwala automatycznie generować określoną treść przed i/lub po określonym elemencie. Na przykład, polecenie
p:before {content : "Początek akapitu: "}p:after {content : " :Koniec akapitu"}
spowoduje automatyczne wstawienie ciągów (bez cudzysłowów) "Początek akapitu: " i " :Koniec akapitu" przed i po każdym akapicie.
Polecenie
p.uwaga:before {content : "Uwaga: "}
opatrzy każdy akapit o klasie class=uwaga dodatkową inwokacją "Uwaga: ".
Tu powinien się pojawić wyraz "uwaga" na początku zdania.
Jako content mogą występować nie tylko zwykłe ciągi znaków (string), ale i adresy internetowe (address), liczniki (counter), apostrofy i cudzysłowy (quotes).
Tu powinien się pojawić wyraz "koniec" na końcu zdania.
Interpretacja: Netscape 6, Opera 5.
Ilustracja dla użytkowników IE.
Dodatkowe efekty formatujące można uzyskać, dodając po prostu odpowiedni kod:
.uwaga:before {content : "Uwaga: "; font-weight: bold}.koniec:after {content : " :Koniec"; color: red}
Selektor ten jest bardzo ważny ze względu na współudział w generowaniu zawartości liczników.