Selektor CSS li:first-child {color:red} zawarty w kaskadowych arkuszach stylów definiuje
A. klasę.
B. pseudoklasę.
C. identyfikator.
D. pseudoelement.
Selektor li:first-child {color:red} definiuje pseudoklasę, bo fragment :first-child opisuje specjalny stan albo położenie elementu w strukturze dokumentu, a nie jego nazwę klasy czy identyfikator. W CSS pseudoklasy zapisuje się z jednym dwukropkiem, np. :hover, :focus, :visited, :nth-child(2) albo właśnie :first-child. W tym przykładzie przeglądarka wybierze każdy element li, który jest pierwszym dzieckiem swojego elementu nadrzędnego, i nada mu kolor czerwony. Praktycznie może to służyć np. do wyróżnienia pierwszej pozycji listy menu, pierwszego elementu w rankingu albo pierwszego punktu w nawigacji. Moim zdaniem to jeden z tych selektorów, które warto dobrze kojarzyć, bo pozwala pisać czystszy HTML bez dokładania zbędnych klas typu first. Zgodnie z dobrymi praktykami CSS lepiej używać selektorów strukturalnych tam, gdzie styl wynika z położenia elementu, a nie z osobnej roli semantycznej. Trzeba tylko uważać: li:first-child zadziała tylko wtedy, gdy li faktycznie jest pierwszym dzieckiem rodzica, a nie po prostu pierwszym elementem li widocznym na liście po jakimś innym tagu.
W tym selektorze łatwo pomylić kilka pojęć, bo wszystkie dotyczą wybierania elementów w CSS, ale zapis jest inny i ma inne znaczenie. Klasa w CSS zaczyna się od kropki, na przykład .aktywny albo .menu-item. Gdyby chodziło o klasę, selektor wyglądałby raczej tak: li.pierwszy albo .pierwszy. Klasa jest przypisywana w HTML przez atrybut class i zwykle opisuje rolę lub wariant stylu elementu. Tutaj nie ma kropki, więc nie mówimy o klasie. Identyfikator zapisuje się z kratką, na przykład #naglowek lub li#start, i odnosi się do atrybutu id. Id powinien być unikalny w dokumencie, więc stosuje się go ostrożnie, bo ma też wysoką specyficzność i potrafi potem utrudnić nadpisywanie stylów. W podanym selektorze nie występuje znak #, więc to też odpada. Pseudoelement natomiast służy do stylowania konkretnej części elementu albo tworzenia wirtualnej zawartości, np. ::before, ::after, ::first-line czy ::first-letter. We współczesnym zapisie CSS pseudoelementy zwykle mają dwa dwukropki, chociaż historycznie bywały wyjątki. :first-child nie tworzy żadnego fragmentu elementu, tylko filtruje elementy według ich położenia w drzewie DOM. Typowy błąd myślowy polega na tym, że ktoś widzi dwukropek i od razu uznaje to za pseudoelement. A tu właśnie dwukropek oznacza pseudoklasę, czyli warunek wyboru elementu. Z mojego doświadczenia najlepiej zapamiętać: kropka to klasa, kratka to id, jeden dwukropek najczęściej pseudoklasa, a podwójny dwukropek najczęściej pseudoelement.