Pseudoelementy

Pseudoelementy

Ciekawą grupę selektorów stanowią pseudoelementy, które pozwalają na przypisanie kolejnych wymyślnych stylów do elementów strony WWW.

Pseudoelement :first-letter pozwala na formatowanie pierwszej litery w bloku tekstu. Przykładowy arkusz spowoduje powiększenie pierwszej litery do wielkości 100 punktów i nadanie jej koloru czerwonego.

p
{
color:navy;
font-size:30pt;
}
p:first-letter
{
color:red;
font-size:100pt;
}

Efektem działania powyższego arkusza stylów będzie powiększona pierwsza litera każdego akapitu występującego w dokumencie XHTML/HTML.

<p>Pierwsza litera tego akapitu zostanie powiększona za pomocą pseudoelementu :first-letter.</p>

Oczywiście nic nie stoi na przeszkodzie, by pseudoelement :first-letter stosować z innymi znacznikami. Przykładem takiego postępowania może być poniższy listing, na którym połączyłem ten element z nagłówkiem stopnia pierwszego.

h1
{
color:navy;
font-size:30pt;
}
hl:first-letter
{
color:red;
font-size:100pt;
}

Przykładowy kod:
<h1>Portal stonet.pl</h1>

Kolejnym pseudoelementem jest : first-line, który obejmuje formatowaniem całą pierwszą linię, a nie tylko pierwszą literę.

p
{
color:navy;
font-size:12pt;
}
p:first-line
{
color:red;
font-size:20pt;
font-weight:bold;
}

Przykładowy kod HTML:

<p>Kolejnym pseudoelementem jest :first-line, obejmuje formatowaniem całą pierwszą linię, a nie tylko pierwszą literę.</p>

Zarówno :first-letter, jak i :first-line są poprawnie obsługiwane przez najpopularniejsze przeglądarki stron WWW.

Poza :first-letter oraz :first-line w specyfikacji umieszczono jeszcze dwa inne pseudoelementy: :after oraz :before. Oba służą do umieszczania tekstu bądź elementu graficznego przed i za formatowanym elementem strony. Poniżej zamieszczam odpowiedni przykład.

p:before
{
content:”WAŻNA WIADOMOŚĆ”;
font-size:15pt;
font-style:italic;
font-weight:bold;
}
p:after
{
content:”AUTOR Tomasz Dalkowski”;
font-size:15pt;
font-style:italic;
font-weight:bold;
}

Przykładowy kod:

<p>Poza :first-letter oraz :first-line w specyfikacji umieszczono jeszcze dwa inne pseudoelementy: :after oraz :before. Oba służą do umieszczania tekstu przed i za formatowanym elementem strony. </p>

Oba prezentowane pseudoelementy :after oraz :before działają poprawnie w Operze i Mozilli.