Тавсифи псевдоклассҳо ва псевдоэлементҳо дар 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.