Pseudoklasy i Pseudoelementy CSS (:hover, ::before)

Różnica między Pseudoklasą a Pseudoelementem:

• Pseudoklasa (:) – odnosi się do stanu elementu w drzewie DOM (np. najechanie myszą, stan formularza, kolejność potomka).
• Pseudoelement (::) – tworzy lub stylizuje abstrakcyjną część elementu, która nie istnieje bezpośrednio w kodzie HTML.

/* Pseudoklasy: */
button:hover { background-color: #0056b3; }
input:focus { border-color: #28a745; outline: none; }
tr:nth-child(even) { background-color: #f2f2f2; } /* Wiersze parzyste w tabeli */

/* Pseudoelementy (zawsze wymagają właściwości content): */
.wskazowka::before {
    content: "💡 ";
    font-weight: bold;
}
.karta::after {
    content: "";
    display: block;
    clear: both;
}

Najczęstsze pułapki na egzaminie INF.03:

• Pseudoelementy ::before i ::after bezwzględnie wymagają deklaracji content: ""; – bez niej w ogóle nie wyrenderują się w przeglądarce!
• Parzystość wierszy tabeli: nth-child(even) (parzyste) lub nth-child(odd) (nieparzyste) – to bardzo popularne zadanie praktyczne.