CSS'da pseudoklasslar nima?

CSS'dagi pseudo-sinflar, elementning maxsus holatini ko‘rsatish uchun tanlangan kalit so‘zlardir. Ular foydalanuvchi bilan o‘zaro ta’sir, hujjat tuzilmasidagi joylashuvi yoki boshqa xususiyatlarga asoslangan holda uslublarni qo‘llash imkonini beradi va bu xususiyatlar standart selektorlar bilan ifodalanmaydi.

Pseudo-sinflar misollari:

• Foydalanuvchi holatlari:

  • :hover - sichqoncha bilan ustiga bosilgan element.
  • :active - faollashtirilayotgan element (masalan, bosilgan tugma).
  • :focus - kirish fokusida bo‘lgan element (masalan, matn maydoni).
  • :visited - foydalanuvchi avval tashrif buyurgan havola.
  • :link - foydalanuvchi hali tashrif buyurmagan havola.

• Tuplamdagi joylashuvi:

  • :first-child - ota-ning birinchi bolasi.
  • :last-child - ota-ning oxirgi bolasi.
  • :nth-child(n) - n-chi bolasi.
  • :first-of-type - turiga ko‘ra birinchi element.
  • :last-of-type - turiga ko‘ra oxirgi element.

• Boshqalar:

  • :empty - bolalari yoki matni bo‘lmagan element.
  • :not(selector) - ko‘rsatilgan selektorga mos kelmaydigan elementlar.

Sintaksis:

selector:pseudo-class {
  property: value;
}

Foydalanish misoli:

/* Paragraf ustiga sichqoncha bilan bosilganda matn rangini o‘zgartirish */
p:hover {
  color: blue;
}

/* Ro‘yxatning birinchi elementiga uslub berish */
li:first-child {
  font-weight: bold;
}

Pseudo-sinflar selektorlarning imkoniyatlarini kengaytiradi, oddiy uslublar o‘zgarishlari uchun JavaScript ishlatmasdan, yanada dinamik va interaktiv interfeyslar yaratishga imkon beradi.