Pseudoklasslar

7.1 Vəziyyət psevdo-sinifləri

CSS-də psevdo-siniflər — bu xüsusi açar sözlərdir, selektorlara əlavə olunur ki, elementin vəziyyətini və ya sənəd strukturundakı yerini göstərsin. Onlar, adi selektorlar vasitəsilə göstərmək mümkün olmayan xüsusi vəziyyətlərdə və ya hallarda elementlərə stillər tətbiq etməyə imkan verir.

Əsas psevdo-siniflər:

• Vəziyyət psevdo-sinifləri
• Struktur vəziyyət psevdo-sinifləri
• Forma psevdo-sinifləri
• Naviqasiya psevdo-sinifləri

Sintaksis:

    
      selektor:psevdo-sinif {
        xassə: qiymət;
        xassə: qiymət;
      }
    
  

Vəziyyət psevdo-sinifləri

Bu psevdo-siniflər elementlərin cari vəziyyətindən asılı olaraq onları stilləşdirmək üçün istifadə olunur, məsələn, kursorun üzərinə gətiriləndə və ya aktiv elementin üzərində:

• :hover — istifadəçi elementi kursorla göstərdikdə tətbiq olunur
• :active — element aktivləşdirildikdə (adətən kliklə) tətbiq olunur
• :focus — element fokusda olduqda (məsələn, klaviatura ilə istifadə zamanı) tətbiq olunur
• :visited — ziyarət olunmuş keçidlərə tətbiq olunur
• :link — ziyarət olunmamış keçidlərə tətbiq olunur

7.2 Psevdo-sinif hover

:hover psevdo-sinifi elementə tətbiq olunur, istifadəçi siçan işarəsini onun üzərinə gətirəndə. Bu, tez-tez linklərin və düymələrin görünüşünü dəyişmək üçün istifadə olunur hover zamanı.

Syntax:

    
      selektor:hover {
        xüsusiyyət: dəyər;
        xüsusiyyət: dəyər;
      }
    
  

Nümunə:

Bu selektor mətnin rəngini dəyişdirir və linkləri siçan işarəsi ilə üzərinə gətiriləndə vurğulayır.

    
      <a href="#">Placeholder Link</a>
    
  

    
      a:hover {
        color: red;
        text-decoration: underline;
      }
    
  

Tətbiqlər:

• İstifadəçi interfeysi (UI) ilə vizual geribildirim sayəsində qarşılıqlı əlaqəni yaxşılaşdırır
• Düymələr, linklər və digər interaktiv elementlər üçün istifadə olunur

7.3 focus Psevdo sinifi

:focus psevdo sinifi hansısa element fokuslandıqda tətbiq edilir. Məsələn, üzərinə klikləndikdə və ya Tab düyməsi ilə keçid ediləndə. Ən çox input-lar və digər forma elementləri üçün istifadə olunur.

Sintaksis:

    
      selektor:focus {
        xassə: dəyər;
        xassə: dəyər;
      }
    
  

Nümunə:

Bu selektor input-un sərhədinin rəngini dəyişdirir və fokuslananda outline-i silir.

    
      <input type="text" name="text" id="text">
    
  

    
      input:focus {
        border-color: blue;
        outline: none;
      }
    
  

Tətbiq sahələri:

• Veb səhifələrin əlçatanlığını (accessibility) artırır
• Fokuslanmış interaktiv elementləri daha nəzərə çarpan edir

7.4 Psevdo-sinif nth-child

:nth-child psevdo-sinifi elementləri valideyn elementinin uşaqları arasında yerləşməsinə əsasən tətbiq olunur. Bu, arqument qəbul edir, hansı ki, bu arqument rəqəm, açar söz və ya ifadə ola bilər.

Sintaksis:

    
      selektor:nth-child(n) {
        xüsusiyyət: dəyər;
        xüsusiyyət: dəyər;
      }
    
  

Nümunə:

Bu selektor elementlərə qardaş və bacılar arasındakı mövqeyinə əsasən üslubları tətbiq etməyə imkan verir.

    
      <ul>
        <li>Element 1</li>
        <li>Element 2</li>
        <li>Element 3</li>
        <li>Element 4</li>
        <li>Element 5</li>
        <li>Element 6</li>
        <li>Element 7</li>
      </ul>
    
  

    
      /* Bütün tək rəqəmli uşaqlara üslub tətbiq edir */
      li:nth-child(odd) {
          background-color: lightgray;
      }

      /* Bütün cüt rəqəmli uşaqlara üslub tətbiq edir */
      li:nth-child(even) {
          background-color: lightblue;
      }

      /* İkinci uşağa üslub tətbiq edir */
      li:nth-child(2) {
          color: red;
      }
    
  

Tətbiq:

• Cədvəl sətirlərinə, siyahı elementlərinə və digər təkrarlanan strukturlara üslub tətbiq edir
• Əlavə siniflər əlavə etmədən mürəkkəb layout və üslub yaratmağa imkan verir

7.5 Psevdo-siniflərin istifadəsinə nümunələr

    
      <button type="button">Button</button>
    
  

    
      button:hover, button:focus {
        background-color: darkblue;
        color: white;
      }
    
  

Cədvəlin cüt sətirlərinin tərtibatı:

    
      <table>
        <tr>
          <th>Adı</th>
          <th>Miqdarı</th>
          <th>Qiyməti</th>
        </tr>
        <tr>
          <td>Məhsul 1</td>
          <td>5</td>
          <td>10 manat</td>
        </tr>
        <tr>
          <td>Məhsul 2</td>
          <td>3</td>
          <td>15 manat</td>
        </tr>
        <tr>
          <td>Məhsul 3</td>
          <td>8</td>
          <td>7 manat</td>
        </tr>
      </table>
    
  

    
      tr:nth-child(even) {
        background-color: #f2f2f2;
      }
    
  

Bəzi elementlərin ümumi üslubdan istisna edilməsi:

    
      <ul>
        <li class="list-item">Element 1</li>
        <li class="list-item">Element 2</li>
        <li class="list-item">Element 3</li>
        <li class="list-item">Element 4</li>
        <li class="list-item">Element 5</li>
        <li class="list-item">Element 6</li>
        <li class="list-item">Element 7</li>
      </ul>
    
  

    
      .list-item:not(:last-child) {
        border-bottom: 1px solid #ddd;
      }