Selektory pseudoelementów

W tym rozdziale dowiesz się...

• Do czego przydają się pseudoelementy CSS?
• W jaki sposób zmienić wygląd pierwszej linii tekstu?
• W jaki sposób zmienić wygląd pierwszej litery tekstu?
• W jaki sposób wygenerować dynamicznie tekst przed określonym elementem?
• W jaki sposób wygenerować dynamicznie tekst po określonym elemencie?
• W jaki sposób kontrolować wygląd cudzysłowów? Jak powinno się wpisywać cytaty zagnieżdżone w języku polskim?

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ść }

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:

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ść }

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:

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 }

Przed...

selektor:before { content: "treść" }

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:

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 }

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 (X)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 }

Po...

selektor:after { content: "treść" }

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:

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 }

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 (X)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 }

Cudzysłowy

(interpretuje Internet Explorer 8.0, Firefox, Opera)

W języku (X)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 (X)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:

---

Wybrane znaki cudzysłowów używane w różnych językach

Znak	Kod	Nazwa
"	"\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 }

albo (rzadziej spotykane):

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

---

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 }

• Selektory specjalne
• Selektory pseudoklas

• Do góry
• Strona główna