Poprawna odpowiedź to „a:link”, ponieważ jest to zapis selektora pseudoklasy w CSS. Dwukropek po nazwie elementu „a” oznacza właśnie pseudoklasę – w tym przypadku chodzi o konkretny stan linku, czyli odnośnik, który jeszcze nie został odwiedzony przez użytkownika. W specyfikacji CSS (np. CSS2.1, CSS Selectors Level 3/4) pseudoklasy opisują stany dynamiczne albo logiczne cechy elementu, których nie da się łatwo zapisać w samym HTML, jak :hover, :active, :visited, :focus, :first-child, :nth-child() i wiele innych. Moim zdaniem warto od razu kojarzyć, że jeżeli widzisz dwukropek po selektorze, a potem słowo-klucz, to prawie na pewno jest to pseudoklasa. Przykładowo: a:hover { text-decoration: underline; } a:visited { color: purple; } input:focus { border-color: #00aaff; } Takie selektory pozwalają stylować elementy w zależności od interakcji użytkownika lub ich położenia w drzewie DOM. W praktyce front-endowej bardzo często używa się zestawu pseudoklas dla linków w kolejności: :link, :visited, :hover, :active (tzw. LVHA), żeby przeglądarka stosowała style w przewidywalny sposób. Dobrą praktyką jest też rozróżnianie kolorów linków odwiedzonych (:visited) i nieodwiedzonych (:link), ale w granicach czytelności interfejsu. W nowoczesnym CSS mamy też pseudoklasy takie jak :not(), :is(), :has(), które bardzo ułatwiają pisanie złożonych selektorów bez nadmiernego kombinowania z klasami w HTML. Jednak fundament pozostaje ten sam: pseudoklasa to coś po dwukropku, co opisuje stan, a nie zwykły typ, klasę czy id elementu. Dlatego w tym pytaniu jedynie „a:link” spełnia definicję selektora pseudoklasy.
W tym zadaniu wszystkie odpowiedzi wyglądają jak poprawne selektory CSS, ale tylko jedna z nich jest selektorem pseudoklasy. To dość typowa pułapka: ktoś widzi poprawny składniowo selektor i automatycznie zakłada, że skoro jest „jakiś znak specjalny”, to pewnie chodzi o pseudoklasę. W CSS warto jednak rozróżniać kilka zupełnie różnych mechanizmów: selektor typu, selektor klasy, selektor identyfikatora oraz właśnie pseudoklasy. Zapis „p#wyroznienie” łączy selektor typu z selektorem identyfikatora. Oznacza akapit <p> o konkretnym id="wyroznienie". Znak # w CSS nie ma nic wspólnego z pseudoklasami, tylko jednoznacznie wskazuje na identyfikator elementu. To jest bardzo częste nieporozumienie: część osób myli dwukropek z kratką, bo oba wyglądają jak „specjalne dopiski”. Tymczasem pseudoklasy zawsze używają dwukropka, a identyfikatory – znaku #. „td.wyroznienie” to z kolei połączenie selektora typu z selektorem klasy. Ten zapis wybierze komórki tabeli <td> posiadające class="wyroznienie". Kropka w CSS zawsze oznacza klasę, czyli coś, co definiujemy w atrybucie class w HTML. To zupełnie inny mechanizm niż pseudoklasy, bo klasę nadajemy ręcznie w kodzie HTML, a pseudoklasa opisuje stan lub cechę obliczaną przez przeglądarkę, np. czy element jest pierwszy w swoim rodzicu, czy link jest odwiedzony, czy pole formularza ma fokus. Zapis „body” to najprostszy możliwy selektor typu – wskazuje wszystkie elementy <body> w dokumencie (zwykle jest tylko jeden). Tu w ogóle nie ma żadnego symbolu wskazującego na pseudoklasę, więc traktowanie tego jako pseudoklasy to już zupełne pomieszanie pojęć: to po prostu nazwa elementu HTML. Typowy błąd myślowy przy takich pytaniach polega na tym, że zamiast skupić się na definicji pseudoklasy („selektor z dwukropkiem, opisujący stan”), uczestnik testu szuka odpowiedzi, która „najbardziej wygląda na zaawansowaną”. Tymczasem wszystkie błędne odpowiedzi są zwykłymi, podstawowymi selektorami: typu, klasy i id. Pseudoklasa zawsze ma postać coś:coś_tam, np. a:hover, button:disabled, li:first-child. Jeżeli nie ma dwukropka – to na pewno nie jest pseudoklasa, niezależnie od tego, jak bardzo skomplikowany wygląda zapis.