CSS'da psevdoklasslar psevdoelementlardan nimasi bilan farq qiladi?

Savol

Psevdoklasslar (:hover, :nth-child) va psevdoelementlar (::before, ::after) o'rtasida qanday farq bor?

Qisqa javob

Psevdoklass allaqachon mavjud elementning maxsus holati yoki pozitsiyasini tasvirlaydi (kursorni olib borish, birinchi farzand, noto'g'ri to'ldirilgan maydon). Psevdoelement esa elementning bir qismini tasvirlaydi yoki razmetkada mavjud bo'lmagan yangi tugun hosil qiladi (matnning birinchi qatori, element oldidan/keyinidan mazmun). Sintaksis bo'yicha psevdoklasslar bitta ikki nuqta bilan, psevdoelementlar esa ikkita ikki nuqta bilan yoziladi.

Batafsil javob

Psevdoklasslar (:bitta-ikki-nuqta) allaqachon DOM'da mavjud, lekin boshqa elementlarga nisbatan ma'lum bir holatda yoki pozitsiyada bo'lgan elementlarni tanlaydi:

• interaktsiya holatlari: :hover, :focus, :active, :visited;
• forma holatlari: :checked, :disabled, :required, :valid/:invalid;
• struktura/pozitsion: :first-child, :last-child, :nth-child(n), :only-child;
• mantiqiy: :not(), :is(), :where(), :has().

Psevdoelementlar (::ikkita-ikki-nuqta) DOM'da o'z tuguniga ega bo'lmagan element mazmunining bir qismiga murojaat qiladi yoki yangi generatsiyalangan tugun yaratadi:

• ::before/::after — element mazmunidan oldin/keyin generatsiyalangan mazmunni qo'yadi; content xususiyatini (hatto bo'sh content: "" bo'lsa ham) talab qiladi, aks holda renderlanmaydi. Bezak elementlari, ikonkalar, qo'shtirnoqlar, hisoblagichlar uchun ishlatiladi — HTML'ni ortiqcha teglar bilan chuqurlashtirmasdan.
• ::first-line/::first-letter — matn mazmunining bir qismini (birinchi qator, birinchi harf) stillashtiradi, buni oddiy selektor bilan ajratib bo'lmaydi.
• ::placeholder — inputning pleysholderini stillashtiradi.
• ::selection — foydalanuvchi ajratgan matnni stillashtiradi.

Sintaksis: CSS3 spetsifikatsiyasi bo'yicha psevdoelementlar psevdoklasslardan farqlanishi uchun ikkita ikki nuqta bilan yozilishi kerak (::before), lekin tarixiy sabablarga ko'ra brauzerlar hozirgacha eski psevdoelementlar uchun bitta ikki nuqtani qo'llab-quvvatlaydi (:before, :after) — yangi kodda ikkitasini aniq ishlatgan ma'qul.

Asosiy mazmuniy farq: psevdoklass renderlash daraxtida hech qachon yangi tugun yaratmaydi, u faqat ma'lum shart bajarilganda mavjud elementga stillar qo'llaydi; psevdoelement esa razmetkada bo'lmagan vizual mazmunni haqiqatan qo'shishi mumkin.

Misol

/* psevdoklass: mavjud elementning holati */
.button:hover {
  background-color: #2563eb;
}

.list li:nth-child(odd) {
  background-color: #f5f5f5;
}

input:invalid {
  border-color: crimson;
}

/* psevdoelement: HTML'da bo'lmagan mazmunni generatsiya qiladi */
.tooltip::before {
  content: "";
  position: absolute;
  top: -4px;
  border: 4px solid transparent;
  border-bottom-color: #333;
}

.required-field::after {
  content: " *";
  color: crimson;
}

.article p::first-letter {
  font-size: 2em;
  font-weight: bold;
}

::selection {
  background-color: #ffe58f;
}

Qo'shimcha savollar

• Nega ::before/::after content xususiyatisiz renderlanmaydi?
• :is() va :where() specificity'ga ta'siri bo'yicha bir-biridan nimasi bilan farq qiladi?
• <img> elementiga ::before qo'shish mumkinmi va nega bu ishlamaydi?