CSSте псевдокласстар эмне?

CSSдеги псевдокласстар — бул белгилердин өзгөчө абалын көрсөтүү үчүн селекторлорго кошулган ачкыч сөздөр. Алар колдонуучунун өз ара аракеттенүүсүнө, документтин түзүлүшүндөгү ордуна же башка өзгөчөлүктөргө негизделген стильдерди колдонууга мүмкүндүк берет жана бул өзгөчөлүктөр стандарттык селекторлор менен билдирилбейт.

Псевдоклассардын мисалдары:

• Колдонуучу абалы:

  • :hover — курсор жайгашкан элемент.
  • :active — активдештирилген элемент (мисалы, басылган баскыч).
  • :focus — киргизүү фокусунда турган элемент (мисалы, тексттик талаа).
  • :visited — колдонуучу мурда көргөн шилтеме.
  • :link — колдонуучу дагы көрбөгөн шилтеме.

• Түзүмдөгү жайгашуусу:

  • :first-child — ата-эне менен биринчи баласы.
  • :last-child — ата-эне менен акыркы баласы.
  • :nth-child(n) — n-чи баласы.
  • :first-of-type — өзүнүн түрүнүн биринчи элементи.
  • :last-of-type — өзүнүн түрүнүн акыркы элементи.

• Башка:

  • :empty — балдары же тексттери жок элемент.
  • :not(selector) — көрсөтүлгөн селекторго туура келбеген элементтер.

Синтаксис:

selector:pseudo-class {
  property: value;
}

Колдонуу мисалы:

/* Параграф үстүнө курсорду коюу менен тексттин түсүн өзгөртүү */
p:hover {
  color: blue;
}

/* Тизмедеги биринчи элементке стиль берүү */
li:first-child {
  font-weight: bold;
}

Псевдокласстар селекторлордун мүмкүнчүлүктөрүн кеңейтет, анткени алар аркылуу жөнөкөй стилдик өзгөртүүлөр үчүн JavaScript колдонбостон, көбүрөөк динамикалык жана интерактивдүү интерфейстер түзүүгө болот.