Псевдо-класове и Псевдо-елементи в CSS

Pseudo-Class е ключова дума, която се добавя към селектор и определя специално състояние на избраният елемент. Например псевдо-класът „:hover“ може да бъде използван, за да се селектира линк, когато потребителския mouse pointer премине над линка и този линк може после да бъде стилизиран. Например:

Ако имаме a {color: red;}, нашите линкове ще са червени на цвят, но ако се добави псевдокласът „:hover“ и сменим цвета на зелен, например (a:hover {color: green}), то тогава цветът на линка ще става зелен при преминаване с мишката върху него.

Псевдо-класовете се състоят от двуеточие (:), последвано от името на псевдокласа, без да има разстояние между символа и текста.

Що се отнася до Pseudo-Elements, те представляват ключови думи, добавени към селектора с цел стилизиране на определена част от избрания елемент. Например можем да искаме да променим размера (font-size) и цвета (color) на първата буква от всеки параграф (p). Тогава можем да изберем p::first-letter и да зададем съответните стилове -> p::first-letter {font-size: 20px; color: pink;}. Псевдо-елементите се отличават от псевдо-класовете по двойното двуеточие (::), последвано от името на псевдо-елемента – отново без разстояние между символа и ключовата дума.

Случаите, в които могат да се използват двата типа ключови думи варират в зависимост от самите тях.

Например :hover псевдо-класа се използва най-вече, когато искаме да стилизираме навигация, бутони и интерактивни елементи, форми, gallery thumbnails и т.н.

От друга страна псевдо-елементи като ::first-letter се използват в случаи като например, когато искаме стилизираме инициали, Drop Caps (Големи начални букви) и т.н.

Най-често използвани псевдо-класове и псевдо-елементи