CSSda pseudoklasslar va pseudoelementlar haqida…

CSS'dagi selektorlarning imkoniyatlarini kengaytiradigan pseudo-sinf va pseudo-elemntlar, elementlarning holati, joylashuvi yoki boshqa xususiyatlariga asoslangan holda uslublarni qo'llash imkonini beradi va ular oddiy selektorlar bilan ifodalanmaydigan xususiyatlardir.

Pseudo-sinflar

Pseudo-sinflar (:) bilan boshlanadi. Ular elementni ma'lum bir holatda uslublash uchun ishlatiladi.

Asosiy pseudo-sinflar:

:hover - sichqoncha bilan ustiga bosilganda elementni uslublash.
:active - bosish vaqtida (faollashtirish) elementni uslublash.
:focus - hozirda fokusda bo'lgan elementni uslublash (masalan, linkga yoki kirish maydoniga bosilgandan so'ng).
:visited - tashrif buyurilgan linklarni uslublash.
:link - tashrif buyurilmagan linklarni uslublash.
:first-child - ota-ning birinchi bolasi bo'lgan elementni uslublash.
:last-child - ota-ning oxirgi bolasi bo'lgan elementni uslublash.
:nth-child(n) - ota-ning n-chi bolasi bo'lgan elementni uslublash. n raqam, kalit so'z (even, odd) yoki ifoda (2n+1) bo'lishi mumkin.
:nth-last-child(n) - oxiridan n-chi bolani uslublash.
:not(selector) - ko'rsatilgan selektorga mos kelmaydigan elementlarni uslublash.

/* Pseudo-sinflardan foydalanish misoli */
a:hover {
  color: blue; /* Ustiga kursor bilan o'tganda linkning rangini o'zgartirish */
}

input:focus {
  border-color: green; /* Fokusda bo'lgan kirish maydonining chegarasining rangini o'zgartirish */
}

li:first-child {
  font-weight: bold; /* Ro'yxatning birinchi elementini uslublash */
}

Pseudo-elemntlar

Pseudo-elemntlar (::) bilan boshlanadi. Ular elementning ma'lum bir qismini uslublash yoki elementning ichki kontentidan oldin yoki keyin yaratilgan kontentni qo'shish uchun ishlatiladi.

Asosiy pseudo-elemntlar:

::before - elementning ichki kontentidan oldin yaratilgan kontentni qo'shadi. Ko'pincha content xususiyati bilan ishlatiladi.
::after - elementning ichki kontentidan keyin yaratilgan kontentni qo'shadi. Ham content xususiyatini talab qiladi.
::first-letter - matn blokining birinchi harfini uslublash.
::first-line - matn blokining birinchi satrini uslublash.
::selection - foydalanuvchi tomonidan tanlangan element qismini uslublash.

/* Pseudo-elemntlardan foydalanish misoli */
p::first-letter {
  font-size: 2em; /* Paragrafning birinchi harfini kattalashtirish */
  font-weight: bold;
}

h2::after {
  content: " ---"; /* Sarlavha ortiga matn qo'shish */
  color: gray;
}

mark::selection {
  background-color: yellow; /* Tanlangan matn fonini o'zgartirish */
  color: black;
}

Tarixan, pseudo-sinflar CSS2.1 bilan moslik uchun bitta nuqta (:) bilan ishlatilgan, CSS3da esa pseudo-elemntlar uchun ikki nuqta (::) ishlatish tavsiya etilgan. Zamonaviy kodda pseudo-elemntlar uchun ikki nuqta ishlatish tavsiya etiladi.

Taqqoslash jadvali:

Xususiyat	Pseudo-sinf	Pseudo-elemnt
Sintaksis	`:sektor`	`::sektor`
Maqsad	Elementning holati	Elementning qismi yoki yaratilgan kontent
Misollar	`:hover`, `:focus`, `:first-child`	`::before`, `::after`, `::first-letter`

CSSda pseudoklasslar va pseudoelementlar haqida tavsiflang.