Какво представляват псевдокласовете в 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 за прости стилови промени.