CSS-də pseudoklasslar və pseudoelementlər haqqında…

CSS-də seçicilərin imkanlarını genişləndirən sahə sinifləri və sahə elementləri, elementlərin vəziyyətinə, mövqeyinə və ya digər xüsusiyyətlərinə əsasən stil tətbiq etməyə imkan verir və bunlar sadə seçicilərlə ifadə edilə bilməyən xüsusiyyətlərdir.

Sahə sinifləri

Sahə sinifləri (:) ilə başlayır. Onlar müəyyən bir vəziyyətdə olan elementi stilizə etmək üçün istifadə olunur.

Əsas sahə sinifləri:

:hover - siçan ilə üzərinə gəldikdə elementi stilizə edir.
:active - klik zamanı (aktivlik) elementi stilizə edir.
:focus - hazırda fokusda olan elementi stilizə edir (məsələn, linkə və ya giriş sahəsinə klik etdikdən sonra).
:visited - ziyarət olunmuş linkləri stilizə edir.
:link - ziyarət olunmamış linkləri stilizə edir.
:first-child - valideynin ilk uşağını stilizə edir.
:last-child - valideynin son uşağını stilizə edir.
:nth-child(n) - valideynin n-ci uşağını stilizə edir. n ədəd, açar söz (even, odd) və ya ifadə (2n+1) ola bilər.
:nth-last-child(n) - sondan n-ci uşağı stilizə edir.
:not(selector) - göstərilən seçici ilə uyğun gəlməyən elementləri stilizə edir.

/* Sahə siniflərinin istifadəsi nümunəsi */
a:hover {
  color: blue; /* Üzərinə gəldikdə linkin rəngini dəyişir */
}

input:focus {
  border-color: green; /* Fokusda olan giriş sahəsinin sərhəd rəngini dəyişir */
}

li:first-child {
  font-weight: bold; /* Siyahının ilk elementini stilizə edir */
}

Sahə elementləri

Sahə elementləri (::) ilə başlayır. Onlar elementin müəyyən bir hissəsini stilizə etmək və ya elementin məzmunundan əvvəl və ya sonra yaradılan məzmunu daxil etmək üçün istifadə olunur.

Əsas sahə elementləri:

::before - elementin məzmunundan əvvəl yaradılan məzmunu daxil edir. Tez-tez content xüsusiyyəti ilə istifadə olunur.
::after - elementin məzmunundan sonra yaradılan məzmunu daxil edir. Həmçinin content xüsusiyyətini tələb edir.
::first-letter - mətn blokunun ilk hərfini stilizə edir.
::first-line - mətn blokunun ilk sətirini stilizə edir.
::selection - istifadəçi tərəfindən seçilmiş element hissəsini stilizə edir.

/* Sahə elementlərinin istifadəsi nümunəsi */
p::first-letter {
  font-size: 2em; /* Paragrafın ilk hərfini böyüdür */
  font-weight: bold;
}

h2::after {
  content: " ---"; /* Başlıqdan sonra mətn əlavə edir */
  color: gray;
}

mark::selection {
  background-color: yellow; /* Seçilmiş mətnin fonunu dəyişir */
  color: black;
}

Tarixi olaraq, sahə sinifləri CSS2.1 ilə uyğunluq üçün tək nöqtə (:) ilə istifadə olunurdu, CSS3-də isə sahə elementləri üçün iki nöqtə (::) istifadə edilməyə başladı ki, daha yaxşı ayırdetmə təmin olunsun. Müasir kodda sahə elementləri üçün iki nöqtə istifadə etmək tövsiyə olunur.

Müqayisə cədvəli:

Xüsusiyyət	Sahə sinfi	Sahə elementləri
Sintaksis	`:seçici`	`::seçici`
Məqsəd	Elementin vəziyyəti	Elementin hissəsi və ya yaradılan məzmun
Nümunələr	`:hover`, `:focus`, `:first-child`	`::before`, `::after`, `::first-letter`

CSS-də pseudoklasslar və pseudoelementlər haqqında təsvir edin.