Psevdoelementlər

5.1 Əsas psevdoelementlər

CSS-də psevdoelementlər proqramçılara sənədin adi selektorlarla seçilə bilməyən hissələrinə stil və kontent əlavə etməyə imkan verir. Onlar "virtual" elementlər yaradır ki, bu elementləri stilizə etmək olar, sanki onlar HTML strukturasının bir hissəsidir. Bu, mürəkkəb layoutlar yaratmaq və veb-səhifənin xarici görünüşünü yaxşılaşdırmaq üçün güclü bir alətdir.

Psevdoelementlər nədir

Psevdoelementlər — selektorlara əlavə edilən açar sözlərdir, hansılar ki, elementlərin müəyyən hissələrini stilizə etməyə imkan verir. Onlar virtual elementlər yaradır ki, bunlar vizual tərtibatın bir hissəsinə çevrilir, ancaq orijinal HTML strukturasını dəyişmir. Psevdoelementlər adətən ilk hərfləri, mətn xətlərini stilizə etmək, dekorativ elementlər əlavə etmək və digər tapşırıqlar üçün istifadə olunur.

Əsas psevdoelementlər

Ən çox istifadə olunan psevdoelementlər bunlardır:

• ::before: seçilmiş elementin kontentindən əvvəl kontent əlavə edir
• ::after: seçilmiş elementin kontentindən sonra kontent əlavə edir
• ::first-letter: elementin ilk hərfini stilizə edir
• ::first-line: elementin ilk sətrini stilizə edir
• ::selection: istifadəçi tərəfindən seçilən mətni stilizə edir

Psevdoelementlərdən necə istifadə etmək olar

CSS-də psevdoelementlər cüt nöqtələrlə (::) işarələnir, lakin bəzi psevdoelementlər həmçinin geriyə uyğunluq üçün köhnə tək nöqtəli yazılışı da dəstəkləyir (:).

Sintaksis:

    
      selektor::psevdoelement {
        xassə: qiymət;
        xassə: qiymət;
        xassə: qiymət;
        ...
      }
    
  

5.2 Pseudoelemenlərin istifadəsi nümunələri

1. Dekorativ elementlərin əlavə edilməsi

Pseudoelemenlər tez-tez dekorativ elementləri hər hansı elementin məzmunundan əvvəl və ya sonra əlavə etmək üçün istifadə olunur:

    
      /* Link mətnindən əvvəl ikon əlavə etmək */

      a::before {
        content: "🔗";
        margin-right: 5px;
      }

      /* Abzasdan sonra dekorativ element əlavə etmək */

      p::after {
        content: "❦";
        display: block;
        text-align: right;
        color: red;
      }
    
  

Bu nümunələrdə ::before və ::after pseudoelemenləri müvafiq olaraq link mətnindən əvvəl ikon əlavə etmək və abzasdan sonra dekorativ element əlavə etmək üçün istifadə olunur.

2. İlk hərflərin və sətirlərin stilizasiyası

Pseudoelemenlər mətnin ilk hərflərini və ya ilk sətirlərini stilizasiya etmək üçün istifadə edilə bilər, bu ən çox tipoqrafiyada tətbiq edilir:

    
      /* Abzasın ilk hərfini stilizasiya etmək */

      p::first-letter {
        font-size: 2em;
        font-weight: bold;
        color: #3498db;
      }

      /* Abzasın ilk sətrini stilizasiya etmək */

      p::first-line {
        font-weight: bold;
        color: #e74c3c;
      }
    
  

Bu nümunələrdə ::first-letter və ::first-line pseudoelemenləri müvafiq olaraq abzasın ilk hərfini və ilk sətrini stilizasiya etmək üçün istifadə olunur.

3. Mətnin seçilməsi

::selection pseudoelementi istifadəçi tərəfindən seçilmiş mətnin stilizasiyası üçün istifadə olunur:

    
      /* Seçilmiş mətni stilizasiya etmək */

      ::selection {
        background-color: #3498db;
        color: white;
      }
    
  

Bu nümunədə istifadəçi tərəfindən seçilmiş mətn mavi fon və ağ mətn rənginə sahib olacaq.

5.3 Psevdoelementlərin xüsusiyyətləri və məhdudiyyətləri

Məhdudiyyətlər:

• Yalnız bir dəfə istifadə: psevdoelementlər ::before və ::after hər elementdə yalnız bir dəfə istifadə oluna bilər
• content tələb olunur: psevdoelementlər ::before və ::after, hətta boş olsa belə, content propertysını tələb edir
• Brauzerlərlə uyğunluq: müasir brauzerlər psevdoelementləri göstərmək üçün iki nöqtəni dəstəkləyir, amma köhnə brauzerlərdə bir nöqtə ilə də işləyir

content propertysının istifadəsinə misal

    
      /* Dekorativ element üçün boş psevdoelementin istifadəsinə misal */

      div::before {
        content: "";
        display: block;
        width: 100%;
        height: 10px;
        background-color: #3498db;
      }
    
  

Bu nümunədə boş psevdoelement ::before dekorativ zolağı div içindəki məzmundan əvvəl əlavə etmək üçün istifadə olunub.