Struktur psevdosinxronlar

3.1 Psevdo-sinif :first-child

CSS-də struktur psevdo-siniflər sənəd ağacında yerləşməsinə görə elementləri seçməyə və onları stilləndirməyə imkan verir. Bu, müəyyən elementlərə daha dəqiq və detallı stillər tətbiq etmək üçün xüsusilə faydalıdır. Gəlin psevdo-sinifləri nəzərdən keçirək: :first-child, :last-child, :nth-child və :nth-of-type.

:first-child psevdo-sinifi öz valideyninin ilk övlad elementini seçir. Bu, eyni tip elementlərdən ibarət qrupda ilk elementi, məsələn, siyahılar və ya abzaslar (p) üçün stilləşdirməkdə faydalıdır.

Sintaksis:

    
      selektor:first-child {
        xassələr: dəyərlər;
      }
    
  

İstifadə nümunəsi

Bu nümunədə siyahının ilk elementi qalın şriftlə və qırmızı rənglə vurğulanır, div içindəki ilk abzas isə böyük hərflərə çevrilir:

    
      /* Siyahının ilk elementinin stilləşdirilməsi */

      li:first-child {
        font-weight: bold;
        color: red;
      }

      /* div içində ilk abzasın stilləşdirilməsi */

      div p:first-child {
        text-transform: uppercase;
      }
    
  

3.2 Psevdo-sinif :last-child

Psevdo-sinif :last-child valideyninin son uşaq elementini seçir. Bu, eyni tip elementlər qrupundakı son elementin üslubunu dəyişmək üçün istifadə olunur.

Sintaksis:

    
      selektor:last-child {
        xassələr: dəyərlər;
      }
    
  

İstifadə nümunəsi

Bu nümunədə siyahının son elementi italik və mavi rənglə vurğulanır, div içərisindəki son paraqraf isə altı xətli edilir:

    
      /* Siyahının son elementinin üslublaşdırılması */

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

      /* Div-dəki son paraqrafın üslublaşdırılması */

      div p:last-child {
        text-decoration: underline;
      }
    
  

3.3 Psevdosınıf :nth-child

:nth-child psevdosınıfı elementləri qrupdakı mövqeyinə əsasən seçməyə imkan verir. O, hansı elementlərin seçiləcəyini müəyyənləşdirən bir arqument qəbul edir. Arqument rəqəm, açar söz və ya ifadə ola bilər.

Sintaksis:

    
      seçicinth-child(arqument) {
        xassələr: dəyərlər;
      }
    
  

Arqumentlər:

• Rəqəm: göstərilən mövqedəki elementi seçir
• Açar sözlər: odd (tək) və even (cüt)
• İfadə: an+b formatında, burada a və b rəqəmlərdir

Nümunə 1: Tək elementlərin seçilməsi

Bu nümunədə bütün tək elementlərə açıq boz fon rəngi verilir:

    
      /* Tək elementlərin siyahısının tərtibi */

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

Nümunə 2: Müəyyən mövqedəki elementlərin seçilməsi

Bu nümunədə siyahının üçüncü elementi qalın şriftlə və yaşıl rənglə vurğulanır:

    
      /* Siyahının üçüncü elementinin tərtibi */

      li:nth-child(3) {
        font-weight: bold;
        color: green;
      }
    
  

Nümunə 3: İfadələrdən istifadə

Bu nümunədə hər birinci elementdən başlayaraq hər ikinci elementə açıq boz fon rəngi verilir:

    
      /* Hər ikinci elementin tərtibi, birincidən başlayaraq */

      li:nth-child(2n+1) {
        background-color: #e0e0e0;
      }
    
  

3.4 Pseudoclass :nth-of-type

Pseudoclass :nth-of-type, :nth-child-ə oxşardır, amma ümumi valideyn elementin daxilindəki tipə əsaslanaraq elementləri seçir. Bu, müəyyən tipli elementləri seçməyə imkan verir, hətta onlar öz valideyninin ilk uşaqları olmasalar da.

Syntax:

    
      selektor:nth-of-type(argument) {
        xüsusiyyətlər: dəyərlər;
      }
    
  

Argumentlər:

• Rəqəm: eyni tipdə olan elementlər arasında göstərilən mövqedə olan elementi seçir
• Açar sözlər: odd (tək) və even (cüt)
• İfadə: format an+b, burada a və b — rəqəmlərdir

Nümunə 1: Cüt paragraf seçimi

Bu nümunədə bütün cüt paragraf effekti tətbiq edilir, onlara açıq-boz fon təyin edilir:

    
      /* Cüt paragraf effekti */

      p:nth-of-type(even) {
        background-color: #d0d0d0;
      }
    
  

Nümunə 2: Eyni tipdə olan elementlərin müəyyən mövqedə seçimi

Bu nümunədə ikinci h2 başlığına ölçü böyüdülməsi və narıncı rəng tətbiq edilir:

    
      /* İkinci h2 başlığının effekti */

      h2:nth-of-type(2) {
        font-size: 2em;
        color: orange;
      }
    
  

Nümunə 3: İfadələrin istifadəsi

Bu nümunədə hər üçüncü elementin siyahısında, ikinci elementdən başlayaraq, onlara açıq-boz fon effekti tətbiq edilir:

    
      /* Siyahıda hər üçüncü elementi effektləndirmək, ikinci elementdən başlayaraq */

      li:nth-of-type(3n+2) {
        background-color: #c0c0c0;
      }