Zapis <span>h1::first-letter {color: red;} </span> jest w porządku, bo korzysta z pseudoelementu :first-letter, który działa na pierwszą literkę w nagłówku h1. To całkiem fajne, bo możemy w ten sposób stylizować tę pierwszą literę i nadać nagłówkom ciekawszy wygląd. Na przykład, jeśli mamy nagłówek h1 z napisem 'Witaj świecie', to dzięki temu kodowi, litera 'W' zrobi się czerwona. W CSS warto ogarnąć, że :first-letter działa tylko na bloki, takie jak nagłówki czy akapity, więc warto to mieć na uwadze, gdy coś stylizujemy. Używanie pseudoelementów to dobre podejście do tworzenia ładnych i funkcjonalnych interfejsów, a przy okazji daje nam większą kontrolę nad tym, jak wyglądają nasze elementy.
Jak coś nie wyszło, to ważne jest, żeby wiedzieć, że pseudoelement :first-letter tylko stylizuje pierwszą literę danego elementu, a nie inne części tekstu. Więc jak ktoś mówi, że czerwony kolor ma dotyczyć pierwszej linii paragrafu czy nagłówka drugiego stopnia, to jest błędne. Często nowi w CSS mylą, jak działają pseudoelementy i co mogą zrobić. :first-letter działa tylko w kontekście bloku, w którym jest użyty, a tu chodzi o h1. Dlatego kolor czerwony nie będzie dotyczyć tekstu w innych elementach jak p czy h2. Mówiąc szczerze, takie spekulacje mogą prowadzić do nieporozumień, co może być frustrujące, jak się pracuje z CSS. Fajnie jest czytać dokumentację i po prostu zrozumieć, gdzie dany pseudoelement działa. I pamiętaj, że stylizacja w CSS polega na hierarchii i kontekście, więc styl przypisany do jednego elementu nie zadziała automatycznie na inne, chyba że to jasno zapiszesz w regułach CSS. To ogarniecie jest mega ważne, by dobrze używać CSS przy projektowaniu stron.