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 менен эки нүктө (::) колдонулуп, жакшы айырмаланган. Modern коддо псевдоэлементтер үчүн эки нүктө колдонуу сунушталат.

Салыштыруу таблицасы:

Өзгөчөлүк	Псевдокласс	Псевдоэлемент
Синтаксис	`:selector`	`::selector`
Мазмуну	Элементтин абалы	Элементтин бөлүгү же генерирленген мазмун

CSSте псевдокласстар жана псевдоэлементтерди сүрөттөп бериңиз.