Pseudoelementy

W języku HTML nie ma mechanizmów dostępu do takich elementów jak pierwsza litera, linia, wybrany elment.

Do formatowania tych specjalnych elementów można wykorzystać właśnie pseudoelementy.

---

:first-line - określa styl pierwszej sformatowanej linii danego bloku

Przykład:

P:first-line { font-weight: bold }

Powyższy zapis oznacza, że należy zmienić grubość czcionki w przypadku każdej pierwszej linii paragrafu.

Należy pamiętać, że pseudoelement :first-line odnosi się tylko do elementów blokowych i może on posiadać właściwości odnoszące się do czcionki, koloru i tła, a także właściwości: 'word-spacing', 'letter-spacing', 'text-decoration', 'vertical-align', 'text-transform', 'line-height', 'text-shadow', 'clear'.

---

:first-letter - określa styl pierwszej litery (znaku) w bloku, elemencie

Przykład:

P:first-letter { font-size: 4em; text-transform: uppercase }

---

:first-child - występuje wtedy, gdy znacznik jest pierwszym 'dzieckiem' innego znacznika.

Przykład:

DIV > P:first-child {color: red;}

Powyższym przypadek dotyczy sytuacji gdy znacznik P będzie pierwszym 'dzieckiem' znacznika DIV.
Poniższy przykład HTML obrazuje to chyba najlepiej:

<P>Paragraf przed DIV.</P> <DIV> <P> Pierwszy element P wewnątrz DIV.</P> </DIV>

Zaś w przypadku poniższego ona nie dotyczy:

<P>Paragraf przed DIV.</P> <DIV> <H2>Nagłówek</H2> <P>P jako drugi wewnątrz DIV.</P> </DIV>

---

:last-child - występuje wtedy, gdy znacznik jest ostatnim 'dzieckiem' innego znacznika.

Przykład:

DIV >P:last-child {color: green;}

<P>Paragraf przed DIV.</P> <DIV> <H2>Nagłówek</H2> <P>P jako ostatni element wewnątrz DIV.</P> </DIV>

ćwiczenie

---

:nth-child(pozycja elementu) - określa styl n-tego 'dziecka' obiektu.

    
    /* wybór drugiego elementu */
        :nth-child(2) {
          color: lime;
        }
        
    /* wybór co czwartego elementu */
        :nth-child(4n) {
          color: lime;
        }

    /* wybór elementów od siódmego: 7 [=0+7], 8 [=1+7], 9 [=2+7], ...
        :nth-child(n+7) {
            color: lime;
        }

    /* wybór elementów zgodnie z podaną regułą: 4 [=(3×0)+4], 7 [=(3×1)+4], 10 [=(3×2)+4], 13 [=(3×3)+4], ...
        :nth-child(3n+4) {
            color:lime;
        }
    
    /* wybór nieparzystych elementów */
        :nth-child(odd) {
          color: lime;
        }  

    /* wybór parzystych elementów */
        :nth-child(even) {
          color: lime;
        }            

ćwiczenie

---

:before - określa zawartość umieszczoną przed danym blokiem lub elementem

Przykład numeracji elementów DIV:

Powyższy przykład numeruje kolejne paragrafy wstawiając przed zawartością każdego z nich wartość w postaci kolejnej liczby oraz łańcucha ". ".

---

:after - określa zawartość umieszczoną po danym bloku lub elemencie

Przykład:

P:after { content: "."}

Powyższy przykład stawia kropkę na końcu każdego paragrafu.

Atrybuty selektorów

CSS2 pozwala autorom zawężać opisy wyglądu poszczególnych elementów. Na przykład można opisać wygląd elementów o konkretnych atrybutach zdefiniowanych w dokumencie.
Atrybuty selektorów mogą wyglądać następująco:

[att]	kiedy element ma atrybut 'att' i jakąkolwiek jego wartość
[att=val]	kiedy wartość atrybutu 'att' jest równa 'val'.
[att~=val]	kiedy wartość atrybutu 'att' jest słowem lub zbiorem słów oddzielonych 'spacją', a jedno z tych słów jest równe wartości 'val'. Wartość 'val' nie może zawierać 'spacji'.
[att|=val]	kiedy wartość atrybutu 'att' rozpoczyna się wyrazem określonym przez wartość 'val'.

Dla przykładu, poniższa instrukcja dotyczy wszystkich znaczników H1, które mają określony atrybut title:

H1[title] { color: blue; }

Poniższy przykład dotyczy przypadku, kiedy znacznik SPAN musi posiadać wartość example atrybutu class:

SPAN[class=example] { color: blue; }

Inny przykład pokazuje występowanie dwóch atrybutów w znaczniku SPAN:

SPAN[hello="Cleveland"][goodbye="Columbus"] { color: blue; }

Poniższy przykład pokazuje jak ukryć wszystkie elementy, których wartość atrybutu LANG jest równa 'fr' (tzn. kiedy język jest francuski):

*[LANG=fr] { display : none }

Poniższy przykład pokazuje wykorzystanie "|=" i dotyczy znaczników, których wartość atrybutu LANG rozpoczynają się od 'en' (np.: 'en', 'en-US', 'en-cockney'):

*[LANG|="en"] { color : red }

Inne

W opisie wyglądu użytym w HTML autorzy mogą używać kropki (.) jako alternatywnego rozwiązania w stosunku do "~=" w przypadku atrybutu o nazwie class. Czyli, DIV.wartosc jest równoważny zapisowi DIV[class~=wartosc]. Na przykład, można przypisać informację o wyglądzie do wszystkich elementów, których atrybut class~="wartosc":

*.wartosc { color: green }

lub inaczej:

.wartosc { color: green }

Poniższy przykład dotyczy tylko znacznika H1, którego atrybut class~="wartosc":

H1.wartosc { color: green }

Wykonanie tej instrukcji w pierwszej linii poniższego dokumentu HTML nie spowoduje ustawienia koloru tekstu na zielony, zaś w drugiej linii tak. Spójrz:

<H1>Ten tekst nie jest w kolorze zielonym.</H1> <H1 class="wartosc">Ten tekst jest w kolorze zielonym.</H1>

W przypadku większej ilości wartości atrybutu class, każda wartość musi być oddzielona kropką ".".

Poniższy przykład pokazuje instrukcję, w której znacznik P powinien mieć za wartości atrybutu class wyrazy: wart1 i wart2 oddzielone klawiszem spacji:

P.wart1.wart2 { color: green}

Instrukcja ta zadziała w przypadku, gdy class="wart1 jest jakas tam i wart2 tez", ale nie zadziała jeżeli class="wart1 jest jakas tam".