Selektory pseudoelementów

W tym rozdziale dowiesz się...

Co to są pseudoelementy?

Języki opisu struktury dokumentów - takie jak XHTML czy HTML - nie dostarczają mechanizmów dostępu do pewnych specyficznych elementów występujących na każdej stronie. Na przykład nie można wprost odnieść się do pierwszej litery ani pierwszej linii w akapicie. Tymczasem często zachodzi potrzeba ich specjalnego wystylizowania. Obejmowanie pierwszej litery w każdym akapicie znacznikiem <span>...</span> jest nieoptymalne i czasochłonne.

Z pomocą przychodzą pseudoelementy CSS, które pozwalają odnieść się do takich specjalnych elementów struktury dokumentu bez konieczności wprowadzania żadnych dodatkowych znaczników do kodu źródłowego. Pseudoelementy pozwalają również automatycznie generować pewną zawartość w określonych miejscach dokumentu, która normalnie nie znajduje się w kodzie źródłowym. Chodzi tutaj o specjalny tekst poprzedzający lub następujący np. po akapicie.

Pierwsza linia

selektor:first-line { cecha: wartość }
Selektorem może być znacznik wyświetlany w bloku. CSS 2.1 dozwala zastosowanie dodatkowo do elementów inline-block, tytułów (podpisów) tabeli (<caption>...</caption>) oraz komórek tabeli (<td>...</td>). [Zobacz: Wstawianie stylów].

Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach.

Polecenie raz zdefiniowane w arkuszu stylów, pozwala na nadanie określonych cech wszystkim pierwszym linijkom, znajdującym się wewnątrz znacznika, na który wskazuje selektor.

UWAGA! Polecenie nie interpretuje MSIE 5, natomiast w MSIE 6 wszystko jest w porządku.

Przykład:

Jeżeli w arkuszu stylów została umieszczona następująca reguła:
p:first-line { color: red }
to wszystkie pierwsze linijki wchodzące w skład akapitów, będą miały czerwony kolor:

To jest akapit... To jest akapit... To jest akapit... To jest akapit... To jest akapit... To jest akapit... To jest akapit... To jest akapit... To jest akapit... To jest akapit... To jest akapit... To jest akapit... To jest akapit... To jest akapit... To jest akapit... To jest akapit... To jest akapit... To jest akapit... To jest akapit... To jest akapit... To jest akapit... To jest akapit... To jest akapit... To jest akapit... To jest akapit... To jest akapit... To jest akapit... To jest akapit... To jest akapit... To jest akapit...

Jeśli używasz Internet Explorera 5, wszystkie linijki w powyższym akapicie będą tego samego koloru (nie zobaczysz efektu). Natomiast w MSIE 6 wszystko jest w porządku.

Pierwsza litera

selektor:first-letter { cecha: wartość }
Selektorem może być dowolny znacznik wyświetlany w bloku [zobacz: Wstawianie stylów].

Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach.

Aby selektor zadziałał, blok musi się rozpoczynać tekstem, a nie np. obrazkiem ani tabelką.

Polecenie pozwala na nadanie określonych cech pierwszej literze treści, znajdującej się wewnątrz znacznika, na który wskazuje selektor.

UWAGA! Polecenie nie interpretuje MSIE 5, natomiast w MSIE 6 wszystko jest w porządku.

Przykład:

Jeżeli w arkuszu stylów została umieszczona następująca reguła:
p:first-letter { color: red }
to pierwsza litera każdego akapitu będzie mieć czerwony kolor:

To jest akapit.

Jeśli używasz Internet Explorera 5, wszystkie litery w powyższym akapicie będą tego samego koloru (nie zobaczysz efektu). Natomiast w MSIE 6 wszystko jest w porządku.


Inny ciekawy przykład:

p:first-letter { color: red; font-family: 'Times New Roman', serif; font-size: 300%; float: left }

W ten sposób często rozpoczynają się rozdziały książek lub artykuły prasowe... W ten sposób często rozpoczynają się rozdziały książek lub artykuły prasowe... W ten sposób często rozpoczynają się rozdziały książek lub artykuły prasowe... W ten sposób często rozpoczynają się rozdziały książek lub artykuły prasowe... W ten sposób często rozpoczynają się rozdziały książek lub artykuły prasowe...

Przed...

selektor:before { content: "treść" }
Selektorem może być dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli i inne [zobacz: Wstawianie stylów].

Natomiast jako wyraz "treść" można wpisać dowolny tekst.

Polecenie pozwala automatycznie dopisywać podaną treść przed określonymi elementami, na które wskazuje selektor.

UWAGA! Polecenie nie interpretuje MSIE 7.0. W MSIE 8.0 wszystko jest w porządku, ale tylko w trybie Standards Compliance.

Przykład:

Jeżeli w arkuszu stylów została umieszczona następująca reguła:
p:before { content: "POCZĄTEK "; color: red }
to wszystkie akapity będą rozpoczynały się od wyrazu "POCZĄTEK", mimo że nie wpiszemy tego wyrazu bezpośrednio w treści akapitu:

To akapit, rozpoczynający się wyrazem "POCZĄTEK", pomimo że nie został on umieszczony w treści akapitu.

Jeśli używasz Internet Explorera 7.0 lub starszego, powyższy akapit będzie się rozpoczynał normalnie ("To jest akapit...") - nie zobaczysz efektu.

Obrazek przed...

Zamiast tekstu generowanego przed wybranym elementem, w analogiczny sposób można tam dodać grafikę:

selektor:before { content: url(ścieżka dostępu do obrazka) }

Ścieżkę dostępu należy konstruować względem arkusza CSS!

Przykład:

To jest akapit, rozpoczynający się obrazkiem, pomimo że nie został on umieszczony w treści akapitu.

Można nawet połączyć generowanie tekstu i grafiki w jednej deklaracji:

p:before { content: url(obrazek.gif) " POCZĄTEK "; color: red }

To jest akapit, rozpoczynający się obrazkiem i tekstem "POCZĄTEK", pomimo że nie zostały one umieszczone w treści akapitu.

Wartość atrybutu przed...

Oprócz powyższych, CSS 2 umożliwia automatycznie wygenerowanie przed właściwą zawartością elementu wartości wybranego atrybutu, który został przypisany z poziomu HTML elementowi, na który wskazuje selektor prosty w regule stylu:

selektor:before { content: attr(atrybut) }

Jeżeli element nie będzie posiadał podanego atrybutu, zostanie wstawiona wartość pusta.

Przykład:

p:before { content: "Ten element posiada atrybut title o wartości: " attr(title) ". "; color: red }

To jest akapit z atrybutem title.

Po...

selektor:after { content: "treść" }
Selektorem może być dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli i inne [zobacz: Wstawianie stylów].

Natomiast jako wyraz "treść" można wpisać dowolny tekst.

Polecenie pozwala automatycznie dopisywać podaną treść po określonych elementach, na które wskazuje selektor.

UWAGA! Polecenie nie interpretuje MSIE 7.0. W MSIE 8.0 wszystko jest w porządku, ale tylko w trybie Standards Compliance.

Przykład:

Jeżeli w arkuszu stylów została umieszczona następująca reguła:
p:after { content: " KONIEC"; color: red }
to wszystkie akapity będą kończyły się wyrazem "KONIEC", mimo że nie wpiszemy tego wyrazu bezpośrednio w treści akapitu:

To jest akapit, kończący się wyrazem "KONIEC", pomimo że nie został on umieszczony w treści akapitu.

Jeśli używasz Internet Explorera 7.0 lub starszego, powyższy akapit będzie się kończył normalnie ("...w treści akapitu.") - nie zobaczysz efektu.

Obrazek po...

Zamiast tekstu generowanego po wybranym elemencie, w analogiczny sposób można tam dodać grafikę:

selektor:after { content: url(ścieżka dostępu do obrazka) }

Ścieżkę dostępu należy konstruować względem arkusza CSS!

Przykład:

To jest akapit, kończący się obrazkiem, pomimo że nie został on umieszczony w treści akapitu.

Można nawet połączyć generowanie tekstu i grafiki w jednej deklaracji:

p:after { content: " KONIEC " url(obrazek.gif); color: red }

To jest akapit, kończący się tekstem "KONIEC" i obrazkiem, pomimo że nie zostały one umieszczone w treści akapitu.

Wartość atrybutu po...

Oprócz powyższych, CSS 2 umożliwia automatycznie wygenerowanie po właściej zawartości elementu wartości wybranego atrybutu, który został przypisany z poziomu HTML elementowi, na który wskazuje selektor prosty w regule stylu:

selektor:after { content: attr(atrybut) }

Jeżeli element nie będzie posiadał podanego atrybutu, zostanie wstawiona wartość pusta.

Przykład:

p:after { content: "Ten element posiada atrybut title o wartości: " attr(title) ". "; color: red }

To jest akapit z atrybutem title.

Cudzysłowy

(interpretuje Internet Explorer 8.0, Firefox, Opera)

W języku HTML istnieją specjalne znaczniki, przeznaczone do oznaczania cytatów: <q>...</q> (krótki cytat), <blockquote>...</blockquote> (blok cytowany). Jak mówi specyfikacja HTML 4.01, cytatów wstawianych w elementach q nie należy obejmować cudzysłowami, gdyż powinna zrobić to przeglądarka. Ponadto, ponieważ w różnych językach (mówionych) używa się różnych znaków cudzysłowu, przeglądarki powinny wygenerować takie, które odpowiadają aktualnemu językowi treści. Od języka zależą również znaki cudzysłowów w cytatach zagnieżdżonych, czyli gdy jeden cytat znajduje się wewnątrz innego. Niestety problem w tym, że przeglądarki zwykle sobie z tym nie radzą :-(

Między innymi z tego powodu specyfikacja CSS 2 umożliwia jawne określenie znaków cudzysłowu i to dla wielu języków jednocześnie. Robi się to dwustopniowo:

  1. Najpierw ustalamy jakie znaki mają być wyświetlone w miejscu automatycznie generowanych cudzysłowów:
    q { quotes: '"' '"' "'" "'" }

    Pierwsza para odpowiada normalnym cytatom, a druga - cytatom zagnieżdżonym. Można tutaj podać więcej takich par - dla głębszych poziomów zagnieżdżenia. Jeżeli w kodzie HTML wystąpi cytat zagnieżdżony o większą liczbę poziomów niż podano, to zostanie dla niego użyta ostatnia z wymienionych par znaków cudzysłowu.

  2. Następnie za pomocą pseudoelementów przed... oraz po... wstawiamy wcześniej zadeklarowane znaki cudzysłowu w odpowiednich miejscach cytatu:
    q:before { content: open-quote }
    q:after { content: close-quote }

UWAGA! Nie obsługuje Chrome 4 ani MSIE 7.0! W MSIE 8.0 wszystko jest w porządku, ale tylko w trybie Standards Compliance.

Przykład:

Ferdynand Wspaniały powiedział: <q>Słyszałem, jak Bill G. mówił: <q>Internet Explorer 7.0 tego nie wyświetli</q>... i miał rację</q> ;-)


Wybrane znaki cudzysłowów używane w różnych językach
ZnakKodNazwa
""\0022"Cudzysłów (podwójny znak cudzysłowu ASCII)
'"\0027"Apostrof (pojedynczy znak cudzysłowu ASCII)
"\2039"Pojedynczy lewy cudzysłów ostrokątny
"\203A"Pojedynczy prawy cudzysłów ostrokątny
«"\00AB"Podwójny lewy cudzysłów ostrokątny
»"\00BB"Podwójny prawy cudzysłów ostrokątny
"\2018"Lewy pojedynczy cudzysłów (górne "6")
"\2019"Prawy pojedynczy cudzysłów (górne "9")
"\201C"Lewy podwójny cudzysłów (górne "66")
"\201D"Prawy podwójny cudzysłów (górne "99")
"\201E"Podwójny dolny cudzysłów (dolne "99")
"\201A"Pojedynczy dolny cudzysłów (dolne "9")

Źródło: Cascading Style Sheets, Level 2

Cytaty w języku polskim można oznaczać następująco:

q:lang(pl) { quotes: "\201E" "\201D" "\00BB" "\00AB" }
q:before { content: open-quote }
q:after { content: close-quote }

To jest akapit w języku polskim (pl). Ferdynand Wspaniały powiedział: Słyszałem, jak Bill G. mówił: Internet Explorer 7.0 tego nie wyświetli... i miał rację ;-)

albo (rzadziej spotykane):
q:lang(pl) { quotes: "\201E" "\201D" "\201A" "\2019" }
q:before { content: open-quote }
q:after { content: close-quote }

To jest akapit w języku polskim (pl). Ferdynand Wspaniały powiedział: Słyszałem, jak Bill G. mówił: Internet Explorer 7.0 tego nie wyświetli... i miał rację ;-)


Ponadto istnieją dwie dodatkowe wartości, które można przypisać do własności content zamiast open-quote i close-quote. Są to: no-open-quote i no-close-quote. Różnią się one w działaniu tym, że normalnie zwiekszają/zmniejszają poziom zagnieżdżenia cytatów, jednak nic nie wyświetlają. Czasami może to być przydatne w przypadku bloków cytowanych, gdzie zdarza się konieczność postawienia na początku każdego akapitu w takim bloku znaku otwarcia cudzysłowu, ale zamknięcie tylko po ostatnim z nich:

blockquote p { quotes: "\201E" "\201D" }
blockquote p:before  { content: open-quote }
blockquote p:after { content: no-close-quote }
blockquote p.last:after { content: close-quote }

To jest pierwszy akapit cytatu blokowego...

To jest drugi akapit cytatu blokowego...

To jest ostatni akapit cytatu blokowego (posiada przypisaną klasę class="last").