Vəziyyət pseudo-class'ları

2.1 Pseudoclass :hover

Hal pseudoclass-ları elementlərə istifadəçi ilə qarşılıqlı əlaqəsinə və ya onların hazırkı vəziyyətinə əsasən stillər tətbiq etməyə imkan verir. Bu pseudoclass-lar tez-tez istifadəçi interfeysini yaxşılaşdırmaq üçün istifadə olunur, istifadəçinin hərəkətlərinə vizual geri dönüş təmin edir.

Pseudoclass :hover, istifadəçi siçan göstəricisini elementin üzərinə gətirdikdə tətbiq olunur.

Syntax:

    
      selektor:hover {
        xassələr: dəyərlər;
      }
    
  

Nümunə:

Bu nümunədə link hover edildikdə rəngini dəyişir və alt xət əlavə olunur, düymə isə hover edildikdə arxa fon və mətn rəngini dəyişir.

    
      /* Link hover olduğu zaman styling */

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

      /* Düymə hover olduğu zaman styling */

      button:hover {
        background-color: #3498db;
        color: white;
      }
    
  

2.2 Psevdo-sinif :focus

:focus psevdo-sinifi, elementə fokus verildiyi zaman tətbiq olunur, məsələn, forma elementinə klikləyərkən və ya Tab düyməsi ilə ona keçdikdə.

Sintaksis:

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

Nümunə:

Bu nümunədə input sahəsi fokuslandıqda sərhədin rəngini dəyişir və outline silinir, text area isə fonun rəngini dəyişir.

    
      /* Fokus zamanı input sahəsinin dizaynı */

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

      /* Fokus zamanı text area'nın dizaynı */

      textarea:focus {
        background-color: #f0f0f0;
      }
    
  

2.3 Psevdosinif :active

:active psevdosinifi istifadəçi tərəfindən elementə aktivasiya anında tətbiq olunur, məsələn, siçan düyməsini klikləməklə. Bu psevdosinif tez-tez interfeys elementlərinə basıldığında vizual geribildirim yaratmaq üçün istifadə olunur.

Sintaksis:

    
      selektor:active {
        xassələr: dəyərlər;
      }
    
  

Nümunə:

Bu nümunədə link basılma anında rəngini dəyişir, düymə isə fon rəngini dəyişir və bir qədər kiçilir, basma effekti yaradır.

    
      /* Linkin basılma anında stilizasiyası */

      a:active {
        color: green;
      }

      /* Düymənin basılma anında stilizasiyası */

      button:active {
        background-color: #2980b9;
        transform: scale(0.98);
      }
    
  

2.4 :visited pseudo-sinifi

:visited pseudo-sinifi istifadəçinin artıq ziyarət etdiyi linklərə tətbiq olunur. Bu, ziyarət edilmiş linkləri ziyarət edilməmişlərdən fərqli şəkildə tərtib etməyə imkan verir.

Sintaksis:

    
      selektor:visited {
        xassələr: dəyərlər;
      }
    
  

Nümunə

Bu nümunədə ziyarət edilmiş link bənövşəyi rəngə dəyişir ki, ziyarət edilməmiş linklərdən fərqlənsin:

    
      /* Ziyarət edilmiş linkin tərtibatı */

      a:visited {
        color: purple;
      }
    
  

2.5 Psevdotiplərin Kombinasiyası

Vəziyyətlə bağlı psevdotiplərdən istifadə edərək mürəkkəb interaktiv stillər yaratmaq olar. Məsələn, linklərin vəziyyətindən asılı olaraq müxtəlif stilləri təyin etmək mümkündür.

Tam həyata keçirilmə nümunəsi

Bu nümunədə linklərin vəziyyətinə uyğun olaraq onların hər biri üçün stil dəyişir: əsas vəziyyət, baxılmış linklər, üzərinə gəldikdə və basılma anında olan stillər:

    
      /* Linklərin əsas stili */

      a {
        color: blue;
        text-decoration: none;
      }

      /* Baxılmış linkin stili */

      a:visited {
        color: purple;
      }

      /* Link üzərinə gəldikdə stili */

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

      /* Link basılma anında stili */

      a:active {
        color: green;
      }