Опишете псевдокласовете и псевдоелементите в CSS…

Псевдокласовете и псевдоелементите разширяват възможностите на селекторите в CSS, позволявайки прилагане на стилове към елементи въз основа на тяхното състояние, позиция или други характеристики, които не могат да бъдат изразени с прости селектори.

Псевдокласове

Псевдокласите започват с една единствена двоеточие (:). Те се използват за стилизиране на елемент в определено състояние.

Основни псевдокласове:

:hover - стилизира елемент при навеждане на мишката.
:active - стилизира елемент по време на клик.
:focus - стилизира елемент, който в момента е във фокус.
:visited - стилизира посетен линк.
:link - стилизира непосетен линк.
:first-child - стилизира първия дъщерен елемент.
:last-child - стилизира последния дъщерен елемент.
:nth-child(n) - стилизира n-я дъщерен елемент.
:nth-last-child(n) - стилизира n-я дъщерен елемент от края.
:not(selector) - стилизира елементи, които не съответстват на селектора.

/* Пример за използване на псевдокласове */
a:hover {
  color: blue; // Смяна на цвета на линка при навеждане
}

input:focus {
  border-color: green; // Смяна на цвета на рамката при фокус
}

li:first-child {
  font-weight: bold; // Стил за първия елемент от списъка
}

Псевдоелементи

Псевдоелементите започват с двойно двоеточие (::). Те се използват за стилизиране на определена част от елемент или за вмъкване на генерирано съдържание преди или след съдържанието на елемента.

Основни псевдоелементи:

::before - вмъква генерирано съдържание преди съдържанието на елемента.
::after - вмъква генерирано съдържание след съдържанието на елемента.
::first-letter - стилизира първата буква на текстовия блок.
::first-line - стилизира първия ред на текстовия блок.
::selection - стилизира частта от елемента, която е избрана.

/* Пример за използване на псевдоелементи */
p::first-letter {
  font-size: 2em; // Увеличаване на първата буква
  font-weight: bold;
}

h2::after {
  content: " ---"; // Добавяне на текст след заглавието
  color: gray;
}

mark::selection {
  background-color: yellow; // Смяна на фона на избрания текст
  color: black;
}

Исторически, псевдокласовете използваха едно двоеточие (:) за съвместимост с CSS2.1, докато псевдоелементите в CSS3 започнаха да използват двойно двоеточие (::) за по-добро разграничение. Препоръчително е да се използва двойно двоеточие за псевдоелементите в съвременния код.

Таблица за сравнение:

Характеристика	Псевдоклас	Псевдоелемент
Синтаксис	`:selector`	`::selector`
Назначение	Състояние на елемента	Част от елемента или генерирано съдържание

Опишете псевдокласовете и псевдоелементите в CSS.