Psevdo-siniflərə giriş

1.1 Psevdosinflər

CSS-də psevdosinf — seçimlərə (selectors) onların vəziyyətini və ya sənəd ağacındakı mövqelərini göstərmək üçün əlavə edilən xüsusi açar sözlərdir. Onlar HTML-kodda siniflər (class) və ya identifikatorlar (id) əlavə etməyə ehtiyac olmadan elementləri onların vəziyyətinə və ya digər elementlərlə əlaqəsinə əsasən üslublaşdırmağa imkan verir.

Psevdosinflərin əsas konsepsiyaları

1. Elementin vəziyyətinin müəyyən edilməsi:
   • Psevdosinflər siçan keçidi, fokus və ya aktivləşmə kimi elementin vəziyyətlərini göstərə bilər
2. Elementin mövqeyinin müəyyən edilməsi:
   • Psevdosinflər elementin valideyninə və ya digər elementlərə münasibətdə, məsələn, birinci ya da sonuncu element kimi mövqeyini göstərə bilər
3. Xüsusi hallar və məntiqi qruplar:
   • Psevdosinflər, həmçinin, tipin birinci elementi və ya tək/cüt element kimi xüsusi hallar da təyin edə bilər

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

Psevdosinflər seçimə iki nöqtə işarəsi ilə (:), əlavə edilir. Onlar həm element seçimlərinə, həm də siniflərə, identifikatorlara və digər seçimlərə tətbiq oluna bilər.

Sintaksis:

    
      seçici:psevdosinf {
        xassələr: dəyərlər;
      }
    
  

İstifadə nümunələri

1. Psevdosinf ilə element seçicisi

Bu nümunədə bütün birinci abzaslar (<p>) valideyn elementlərində qalın olacaq:

    
      p:first-of-type {
        font-weight: bold;
      }
    
  

2. Psevdosinf ilə sinif seçicisi

Bu nümunədə, .button sinifinə malik bütün elementlərin fonu siçan keçidi zamanı mavi olacaq:

    
      .button:hover {
        background-color: blue;
      }
    
  

3. Psevdosinf ilə birləşdirilmiş seçicilər

Bu nümunədə bütün cüt abzaslar (<p>) .container sinfi olan elementlər daxilində qırmızı olacaq:

    
      .container > p:nth-child(2n) {
          color: red;
      }
    
  

1.2 Psevdo-siniflərin nümunələri və tətbiqi

1. Halı müəyyən edən psevdo-siniflər

Elementin halını müəyyən edən psevdo-siniflər, istifadəçinin qarşılıqlı əlaqəsinə və ya elementin vəziyyətinə əsasən onun tərzini dəyişdirməyə imkan verir.

    
      a:link {
        color: blue;
      }

      a:visited {
        color: purple;
      }

      a:hover {
        color: red;
      }

      a:active {
        color: green;
      }
    
  

2. Mövqeyi müəyyən edən psevdo-siniflər

Elementin mövqeyini müəyyən edən psevdo-siniflər, elementlərin DOM strukturundakı yerləşməsinə əsasən tərz tətbiq etməyə imkan verir.

    
      li:first-child {
          font-style: italic;
      }

      li:last-child {
          font-style: italic;
      }

      li:nth-child(odd) {
          background-color: #f0f0f0;
      }

      li:nth-child(even) {
          background-color: #ffffff;
      }
    
  

3. Loji qruplar üçün psevdo-siniflər

Bu psevdo-siniflər elementləri loji qruplarına və ya tiplərinə əsasən tərzləndirmək üçün istifadə olunur.

    
      input:checked {
        background-color: yellow;
      }

      input:disabled {
        background-color: grey;
      }

      input:enabled {
        background-color: white;
      }