Na stronie internetowej zdefiniowano styl, który ma być stosowany do akapitów tylko wtedy, gdy znajduje się nad nimi kursor myszy. W tym celu w definicji stylu należy użyć
Należy użyć pseudoklasy :hover. Pseudoklasa opisuje stan elementu, a nie jego nazwę czy atrybut: reguła p:hover { background-color: yellow; } działa tylko wtedy, gdy kursor znajduje się nad akapitem, a po jego odsunięciu akapit wraca do zwykłego wyglądu. Pseudoklasę dopisuje się po dwukropku do zwykłego selektora. Do zapamiętania inne pseudoklasy stanu: :focus - pole aktywne, :visited - odnośnik odwiedzony, :first-child - pierwszy potomek. Do takich efektów nie potrzeba skryptu, wystarczy sam CSS. Pseudoklasę poprzedza pojedynczy dwukropek, a pseudoelement, np. ::before, dwa dwukropki. Efekt :hover warto łączyć z właściwością transition, by zmiana wyglądu była płynna. Na ekranach dotykowych nie ma kursora, więc najechanie bywa tam symulowane dotknięciem.
Każdy z pozostałych selektorów wybiera elementy na stałe, bez względu na ruch myszy. Sam selektor p sformatuje wszystkie akapity od razu po wczytaniu strony. Klasa, zapisana z kropką, obejmie elementy z atrybutem class, a identyfikator, zapisany z krzyżykiem, jeden element o danym id - oba także działają zawsze. Warunek „tylko gdy kursor jest nad akapitem” opisuje stan, a stany w CSS wyraża się pseudoklasami. Dlatego potrzebny jest zapis p:hover { }, który można zresztą łączyć z klasą, np. p.info:hover. Różnica między tymi mechanizmami polega na tym, czym się kierują: selektor znacznika - nazwą elementu, klasa - wartością atrybutu class, identyfikator - wartością atrybutu id. Żaden z nich nie zależy od tego, co w danej chwili robi użytkownik. Zmienny stan elementu, np. najechanie kursorem, aktywne pole czy odwiedzony odnośnik, wyrażają w CSS pseudoklasy.