Kombinə edilmiş seçicilər

1. Kombinə olunmuş seçicilərin növləri

CSS kombinə olunmuş seçicilər elementləri digər elementlərə nisbətən iyerarxik mövqeyinə əsasən seçməyə imkan verir. Bu, onları kontekstdən asılı olan və ya mürəkkəb bir strukturdakı elementləri tərtib etmək lazım olduqda istifadə üçün faydalı edir. Kombinə olunmuş seçicilər — dəqiq seçim üçün güclü bir vasitədir, yalnız bir class və ya id kifayət etmədikdə faydalıdır. CSS-də əsas kombinə olunmuş seçicilərin növlərini nəzərdən keçirək: nəsil seçicisi, birbaşa övlad seçicisi, qonşu smayil seçicisi və ümumi qonşu seçicisi.

CSS-də kombinə olunmuş seçicilər elementləri HTML iyerarxiyasına əsasən seçmək üçün müxtəlif üsulları əhatə edir. Əsas kombinə olunmuş seçicilərin növləri:

• Nəsil seçicisi (Descendant Selector): digər bir elementin daxilində yerləşən elementləri seçir, istənilən dərinlik səviyyəsində.
• Birbaşa övlad seçicisi (Child Selector): yalnız birbaşa (birbaşa) müəyyən elementin övladlarını seçir.
• Qonşu smayil seçicisi (Adjacent Sibling Selector): eyni iyerarxiya səviyyəsində bir elementdən dərhal sonra gələn elementləri seçir.
• Ümumi qonşu seçici (General Sibling Selector): göstərilən elementdən sonra gələn eyni səviyyəli bütün elementləri seçir.

Bu seçicilərin hər biri müxtəlif hallara uyğundur və elementləri səhifədə yerləşmələrinə görə dəqiq seçməyə imkan verir.

2. Sonrakı selektor (Descendant Selector)

Sonrakı selektor başqa bir elementin içindəki bütün elementləri seçir, yerləşmə səviyyəsindən asılı olmayaraq. Bu, selektorlar arasında boşluq qoyaraq yazılır. Bu cür selektor o vaxt faydalıdır ki, müəyyən bir elementin içindəki elementləri, məsələn, müəyyən bir klassa malik <div> daxilindəki bütün <p> elementlərini stil etmək lazımdır.

.container p {
  color: blue;
}

<div class="container">
  <p>Bu mətn mavi olacaq, çünki konteynerin içindədir.</p>
  <div>
    <p>Bu mətn də mavi olacaq.</p>
  </div>
</div>
<p>Bu mətn dəyişməyəcək, çünki konteynerin içində deyil.</p>

Burada selektor .container p konteyner klası olan elementin içindəki, hansı səviyyədə yerləşməsindən asılı olmayaraq, bütün <p> elementlərini seçəcək.

3. Uşaqlıq elementi üçün selektor (Child Selector)

Uşaqlıq elementi selektoru yalnız elementin birbaşa varislərini seçir. O, selektorlar arasında > simvolundan istifadə etməklə yazılır. Bu selektor, üslubu yalnız ən üst səviyyədə yerləşən elementlərə tətbiq etmək, daha dərin səviyyələrə toxunmamaq lazım olduqda çox rahatdır.

      
  .container > p {
    font-weight: bold;
  }
      
    

      
  <div class="container">
    <p>Bu mətn qalın olacaq.</p>
    <div>
      <p>Bu mətn adi qalacaq, çünki container-in birbaşa varisi deyil.</p>
    </div>
  </div>
      
    

Burada yalnız birinci <p> qalın olacaq, çünki o, .container-in birbaşa varisidir, daxildəki <p> dəyişməz qalacaq.

4. Yanaşı qonşu element seçicisi (Adjacent Sibling Selector)

Yanaşı qonşu element seçicisi bir elementi seçir ki, o birbaşa başqa bir elementdən sonra yerləşir və eyni içlik səviyyəsində olur. Bu seçici + simvolu ilə seçicilər arasında göstərilir və bir elementin dərhal digərindən sonra gələn elementə stil tətbiq etmək üçün istifadə olunur, məsələn, başlıqdan sonra gələn ilk paraqrafa.

      
  h2 + p {
    color: green;
  }
      
    

      
  <h2>Başlıq</h2>
  <p>Bu mətn yaşıl olacaq, çünki o, birbaşa başlıqdan sonra gəlir.</p>
  <p>Bu mətn dəyişməyəcək, çünki o, h2-dən sonra qonşu element deyil.</p>
      
    

Burada h2 + p seçicisi yalnız birbaşa <h2>-dən sonra gələn ilk <p> paraqrafının rəngini dəyişəcək.

5. Ümumi qonşu seçicisi (General Sibling Selector)

Ümumi qonşu seçicisi, verilən elementdən sonra eyni səviyyədə yerləşən bütün elementləri seçir, onların birbaşa sonra gəlməsindən və ya bir neçə element keçməsindən asılı olmayaraq. Bu seçici seçicilər arasında ~ simvolu ilə göstərilir.

      
  h2 ~ p {
    font-style: italic;
  }
      
    

      
  <h2>Başlıq</h2>
  <p>Bu abzas kursiv olacaq.</p>
  <div>
    <p>Bu abzas da kursiv olacaq, çünki o, eyni səviyyədə h2-nin qonşusudur.</p>
  </div>
      
    

Bu nümunədə h2 ~ p seçicisi, <h2>-dən sonra gələn eyni səviyyədəki bütün <p> elementlərini seçir, onların arasında başqa elementlərin olub-olmamasından asılı olmayaraq.

6. Bütün kombinə olunmuş seçicilərdən istifadə nümunəsi

Aşağıda HTML və CSS nümunəsi göstərilib, burada səhifədə yerləşmələrinə görə müxtəlif elementləri seçmək üçün bütün kombinə olunmuş seçicilərdən istifadə nümayiş olunur.

<!DOCTYPE html>
<html lang="az">
<head>
  <meta charset="UTF-8">
  <title>CSS Kombinə olunmuş seçicilər nümunəsi</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <p>.container üçün həm nəsl olan, həm də övlad element olan abzas.</p>
    <div>
      <p>.container üçün nəsl olan, amma övlad element olmayan abzas.</p>
    </div>
  </div>
  <h2>Başlıq</h2>
  <p>h2 üçün bitişik qonşu olan abzas.</p>
  <div>Bu blok növbəti abzaslara təsir etməyəcəkdir.</div>
  <p>h2 üçün ümumi qonşu olan abzas.</p>
</body>
</html>

<!DOCTYPE html>
<html lang="az">
<head>
  <meta charset="UTF-8">
  <title>CSS Kombinə olunmuş seçicilər nümunəsi</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <p>.container üçün həm nəsl olan, həm də övlad element olan abzas.</p>
    <div>
      <p>.container üçün nəsl olan, amma övlad element olmayan abzas.</p>
    </div>
  </div>
  <h2>Başlıq</h2>
  <p>h2 üçün bitişik qonşu olan abzas.</p>
  <div>Bu blok növbəti abzaslara təsir etməyəcəkdir.</div>
  <p>h2 üçün ümumi qonşu olan abzas.</p>
</body>
</html>

/* Nəsl seçicisi */
.container p {
  color: blue;
}

/* Övlad element seçicisi */
.container > p {
  font-weight: bold;
}

/* Bitişik qonşu seçicisi */
h2 + p {
  color: green;
}

/* Ümumi qonşu seçicisi */
h2 ~ p {
  font-style: italic;
}