Pseudoklasy w CSS

Wprowadzenie do pseudoklas w CSS

Pseudoklasy w CSS pozwalają stylizować elementy w zależności od ich stanu lub pozycji w strukturze DOM. Są to „wirtualne” klasy, które definiują stan elementu, nie będąc jego częścią w kodzie HTML.

Najczęściej stosowane pseudoklasy i ich opisy:

1. :hover – stosowana, gdy użytkownik najeżdża myszką na element.
2. :active – stylizuje element w momencie, gdy jest klikany.
3. :focus – stosowana, gdy element (np. pole tekstowe) jest aktywny.
4. :first-child – odnosi się do pierwszego dziecka danego rodzica.
5. :last-child – odnosi się do ostatniego dziecka danego rodzica.
6. :nth-child(n) – umożliwia wybieranie elementów na podstawie ich indeksu (np. co drugi, trzeci, parzysty, itp.).
7. :not(selector) – wybiera elementy, które nie pasują do zadanego selektora.
8. :checked – dotyczy zaznaczonych elementów formularza (np. checkboxów lub radio).
9. :disabled – stylizuje elementy formularzy, które są nieaktywne.
10. :before / :after – pozwalają na dodanie treści przed lub po zawartości elementu.
    
    

    Zadanie 1: Stylizacja za pomocą :hover
    Opis: Stwórz przycisk, który zmienia kolor tła i tekstu po najechaniu myszką.
    
    

    Zadanie 2: Stylizacja za pomocą :focus
    Opis: Stwórz pole tekstowe, które zmienia kolor obramowania, gdy jest aktywne.

    Zadanie 3: Stylizacja z :nth-child(n)
    Opis: Stwórz listę elementów, gdzie co drugi element ma inny kolor tła.

    Zadanie 4: Stylizacja z :first-child i :last-child
    Opis: Zmień styl pierwszego i ostatniego elementu w liście.

    Zadanie 5: Stylizacja z :not(selector)
    Opis: Stwórz tabelę, w której wszystkie komórki poza określoną klasą mają określony kolor.

    Zadanie 6: Stylizacja z :before i :after
    Opis: Stwórz nagłówek z ozdobnymi elementami przed i po tekstem.