1. Co to pseudoklasy ?

    2. CSS przewiduje kilka ściśle określonych klas pozwalających na formatowanie niektórych elementów dokumentu są to Pseudoklasy.

  2. Uwaga dotyczy dwukropka:

    3. Szalenie istotnym elementem w tej konstrukcji jest drukropek występujący pomiędzy selektorem a nazwą klasy.

  3. Tabela opisująca pseudoklasy.

    4. A:link odpowiada za wygląd hiperłącza, jeżeli nie zostało ono jeszcze odwiedzone
    A:visited odpowiada za formatowanie hiperłącza już odwiedzonego
    A:hover zmiany pewnych elementów po najechaniu na nie urządzeniem wskazującym (np. myszą),
    np. odsyłacz nad którym zatrzymano kursor lub element blokowy DIV.
    A:active pozwala nadać dowolne formatowanie elementowi po nakierowaniu na niego wskaźnika myszy
    i wciśnięcie przycisku, ale przed jego zwolnieniem (odsyłacz aktywny → kliknięty)
    A:focus jeżeli chcemy, by właśnie wyświetlony odsyłacz z menu był formatowany innym kolorem.
    Odsyłacz posiadający tzw. fokus - zaznaczony przy poruszaniu się po dokumencie przy pomocy
    klawisza ENTER spowoduje taką reakcję przeglądarki, jakby dany odsyłacz został kliknięty
    :lang → formatowanie wielojęzykowych dokumentów
    :first-child umożliwia określenie formatowania dla pierwszego dziecka wybranego elementu.

  4. Zastosowanie pseudoklasy :active

    1. można używać jako uzupełnienia definicji odnośników
    2. jako elementu poprawiającego czytelność formularzy

  5. Przykłady definiowania pseudoklas + temat

    6. Przykład
    Temat: Arkusz wykorzystujący :link oraz :visited pseudoklasy w połączeniu
    z selektorem A. Przykładowa definicja sformatuje odnoścnik za pomocą koloru czerwonego
    i po wybraniu taki odnośnik będzie miał kolor zielony.

    A:link
    {
     color: red;
    }

    A:visited
    {
     color: green;
    }

    Przykład
    Temat: Formatowanie wyglądu wszystkich odnośników w dokumencie XHTML/HTML.

    A /* Definicja odsyłacza podstawowego */
    {
     font-size: 12pt;
     text-decoration: none;
    }

    A:link
    {
     color: navy;
    }

    A:visited
    {
     color: green;
    }

    A:hover
    {
     color: red;
     text-decoration: underline;
    }

    Przykład
    Temat: Zastosowanie :focus

    A:focus
    {
     color: braun;
    }