Przejdź do treści

Selektory pseudoelementów - CSS

W tym rozdziale dowiesz się...

Używanie selektorów pseudoelementów w arkuszach CSS.

Co to są pseudoelementy?

Do czego przydają się pseudoelementy CSS?

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 :first-line

W jaki sposób zmienić wygląd pierwszej linii tekstu?

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 :first-line

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 :first-letter

W jaki sposób zmienić wygląd pierwszej litery tekstu?

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 :first-letter

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... :before

W jaki sposób wygenerować dynamicznie tekst przed określonym elementem?

Przed... :before

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 :before

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... :before {content: url}

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 :before {content: url}

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... :before {content: attr}

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 :before {content: attr}

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

To jest akapit z atrybutem title.

Pytania i odpowiedzi

Co robi :BEFORE?

Pseudoelement :before w CSS służy do wstawiania treści przed zawartością wybranego elementu. Jest to technika wykorzystywana do dodawania dekoracji, ikon lub innych elementów graficznych przed treścią elementu.

Co to jest "before" po polsku?

Słowo "before" po polsku oznacza "przed".

Po... :after

W jaki sposób wygenerować dynamicznie tekst po określonym elemencie?

Po... :after

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 :after

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... :after {content: url}

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 :after {content: url}

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... :after {content: attr}

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 :after {content: attr}

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

To jest akapit z atrybutem title.

Cudzysłowy {quotes}

W jaki sposób kontrolować wygląd cudzysłowów? Jak powinno się wpisywać cytaty zagnieżdżone w języku polskim?

Cudzysłowy {quotes}

(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 {quotes}

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> ;-)

Znaki cudzysłowów {content: open-quote close-quote}

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

Przykład {quotes, content: open-quote close-quote}

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ę ;-)

Wyłączenie znaków cudzysłowu {content: no-open-quote no-close-quote}

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

Przykład {quotes, content: open-quote no-close-quote close-quote}

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").

Pytania i odpowiedzi

Jak zrobić cudzysłów HTML?

Prosty cudzysłów w kodzie HTML można zrobić za pomocą encji znakowej &quot; lub poprzez wpisanie znaku cudzysłowu bezpośrednio w kodzie: ".

Jak zrobić cudzysłów w cudzysłowie?

Aby umieścić cudzysłów wewnątrz innego cudzysłowu, można użyć różnych kombinacji cudzysłowów. Na przykład: „To jest »cytat« w cudzysłowie” albo "To jest 'cytat' w cudzysłowie".

Jak wygląda polski cudzysłów?

Polski cudzysłów ma postać dwóch przeciwnie skierowanych podwójnych apostrofów: „...”. W kodzie HTML możesz użyć następujących znaków specjalnych: &bdquo;...&rdquo;.

Czy na końcu cytatu stawiamy kropkę?

Kropka kończąca cytat stawiana jest po zamknięciu cudzysłowu, na przykład: „To jest przykład cytatu”.

Jak zaznaczyć przerwę w cytacie?

Przerwę w cytacie zaznacza się przy użyciu znaku wielokropka (w kodzie HTML można użyć: &hellip;) albo po prostu trzech kropek wstawionych w nawiasie kwadratowym bądź okrągłym: „To jest przykład […] przerwy”.

Jak nazywa się pojedynczy cudzysłów?

Pojedynczy cudzysłów nazywa się apostrof.

Czy tytuły rozdziałów piszemy w cudzysłowie?

Tytuły rozdziałów, książek lub publikacji zazwyczaj piszemy kursywą (tekstem pochylonym) albo w cudzysłowie, aby wizulanie je wyróżnić. Wybór zależy od konwencji stylistycznej i preferencji.

Jak zrobić cudzysłów ostrokątny?

Pojedynczy cudzysłów ostrokątny można uzyskać w kodzie HTML za pomocą encji znakowej &lsaquo; () i &rsaquo; (). Natomiast aby uzyskać podwójny cudzysłów ostrokątny, wystarczy wpisać: &laquo; («) i &raquo; (»). W języku polskim kombinacji znaków »...« używa się, gdy występuje cudzysłów w cudzysłowie. Natomiast zapis «...» stosuje się do wskazania znaczeń w słownikach i opracowaniach naukowych.

Pytania i odpowiedzi

Poniżej znajdziesz wykaz najczęściej zadawanych pytań z tego rozdziału wraz ze zwięzłymi odpowiedziami i gotowymi do użycia przykładami kodu CSS. Aby sprawdzić bardziej szczegółowy opis, kliknij odnośnik "Zobacz więcej..." pod wybraną odpowiedzią.

W jaki sposób wygenerować dynamicznie tekst przed określonym elementem?

Co robi :BEFORE?

Pseudoelement :before w CSS służy do wstawiania treści przed zawartością wybranego elementu. Jest to technika wykorzystywana do dodawania dekoracji, ikon lub innych elementów graficznych przed treścią elementu.

Zobacz więcej...

Co to jest "before" po polsku?

Słowo "before" po polsku oznacza "przed".

Zobacz więcej...

W jaki sposób kontrolować wygląd cudzysłowów? Jak powinno się wpisywać cytaty zagnieżdżone w języku polskim?

Jak zrobić cudzysłów HTML?

Prosty cudzysłów w kodzie HTML można zrobić za pomocą encji znakowej &quot; lub poprzez wpisanie znaku cudzysłowu bezpośrednio w kodzie: ".

Zobacz więcej...

Jak zrobić cudzysłów w cudzysłowie?

Aby umieścić cudzysłów wewnątrz innego cudzysłowu, można użyć różnych kombinacji cudzysłowów. Na przykład: „To jest »cytat« w cudzysłowie” albo "To jest 'cytat' w cudzysłowie".

Zobacz więcej...

Jak wygląda polski cudzysłów?

Polski cudzysłów ma postać dwóch przeciwnie skierowanych podwójnych apostrofów: „...”. W kodzie HTML możesz użyć następujących znaków specjalnych: &bdquo;...&rdquo;.

Zobacz więcej...

Czy na końcu cytatu stawiamy kropkę?

Kropka kończąca cytat stawiana jest po zamknięciu cudzysłowu, na przykład: „To jest przykład cytatu”.

Zobacz więcej...

Jak zaznaczyć przerwę w cytacie?

Przerwę w cytacie zaznacza się przy użyciu znaku wielokropka (w kodzie HTML można użyć: &hellip;) albo po prostu trzech kropek wstawionych w nawiasie kwadratowym bądź okrągłym: „To jest przykład […] przerwy”.

Zobacz więcej...

Jak nazywa się pojedynczy cudzysłów?

Pojedynczy cudzysłów nazywa się apostrof.

Zobacz więcej...

Czy tytuły rozdziałów piszemy w cudzysłowie?

Tytuły rozdziałów, książek lub publikacji zazwyczaj piszemy kursywą (tekstem pochylonym) albo w cudzysłowie, aby wizulanie je wyróżnić. Wybór zależy od konwencji stylistycznej i preferencji.

Zobacz więcej...

Jak zrobić cudzysłów ostrokątny?

Pojedynczy cudzysłów ostrokątny można uzyskać w kodzie HTML za pomocą encji znakowej &lsaquo; () i &rsaquo; (). Natomiast aby uzyskać podwójny cudzysłów ostrokątny, wystarczy wpisać: &laquo; («) i &raquo; (»). W języku polskim kombinacji znaków »...« używa się, gdy występuje cudzysłów w cudzysłowie. Natomiast zapis «...» stosuje się do wskazania znaczeń w słownikach i opracowaniach naukowych.

Zobacz więcej...

Powtórka

W jaki sposób zmienić wygląd pierwszej linii tekstu?

selektor:first-line { cecha: wartość }

Zobacz więcej...

W jaki sposób zmienić wygląd pierwszej litery tekstu?

selektor:first-letter { cecha: wartość }

Zobacz więcej...

W jaki sposób wygenerować dynamicznie tekst przed określonym elementem?

selektor:before { content: "treść" }
selektor:before { content: url(ścieżka dostępu do obrazka) }
selektor:before { content: attr(atrybut) }

Zobacz więcej...

W jaki sposób wygenerować dynamicznie tekst po określonym elemencie?

selektor:after { content: "treść" }
selektor:after { content: url(ścieżka dostępu do obrazka) }
selektor:after { content: attr(atrybut) }

Zobacz więcej...

Facebook