5.1 Selektor növləri
CSS-də kombinə edilmiş selektorlar DOM ağacında elementlərin qarşılıqlı yerləşməsinə əsasən elementləri seçməyə imkan verir. Onlar üslubları daha dəqiq idarə etməyə şərait yaradır, elementləri onların kontekstinə görə stilizə etməyə imkan verir. CSS-də bir neçə kombinə edilmiş selektor növü mövcuddur: nəsil, uşaq elementi, yaxın qonşu element və qonşu element.
Kombinə edilmiş selektor növləri:
- Nəsil selektoru (Descendant Selector)
- Uşaq elementi selektoru (Child Selector)
- Yaxın qonşu element selektoru (Adjacent Sibling Selector)
- Ümumi qonşu selektoru (General Sibling Selector)
5.2 Nəvə Selektoru
Nəvə selektoru, göstərilən elementin içindəki bütün elementləri seçir. Nəvələr kimi göstərilən bir elementin içindəki bütün elementlər istənilən daxillik səviyyəsində ola bilər (bu yalnız uşaqlar deyil, həm də nəvələr və daha dərin səviyyələr ola bilər).
Sintaksis:
valideyn nəvə {
xüsusiyyət: dəyər;
xüsusiyyət: dəyər;
}
Nümunə:
/* Bütün <p> elementlərini seçir ki, onlar <div> içindədir */
div p {
color: blue;
}
<div>
<p>Bu paraqraf mavi olacaq.</p>
<div>
<p>Bu paraqraf da mavi olacaq, çünki o, "div"-in nəvəsidir.</p>
</div>
</div>
<p>Bu paraqraf mavi olmayacaq.</p>
5.3 Birbaşa övlad elementi seçicisi
Birbaşa övlad elementi seçicisi yalnız birbaşa övlad olan elementləri seçir.
Sintaksis:
valideyn > övlad {
xassə: dəyər;
xassə: dəyər;
}
Nümunə:
/* Yalnız birbaşa .container övladı olan <p> seçilir */
.container > p {
color: green;
}
<div class="container">
<p>Bu abzas yaşıl olacaq.</p>
<div class="wrapper">
<p>Bu abzas yaşıl olmayacaq, çünki o .container-in birbaşa övladı deyil.</p>
</div>
<p>Bu abzas yaşıl olacaq.</p>
</div>
<p>Bu abzas yaşıl olmayacaq.</p>
5.4 Qonşu Yan Elementin Seçicisi
Qonşu yan elementin seçicisi göstərilmiş elementdən dərhal sonra gələn və eyni səviyyəli yerləşmiş elementi seçir.
Sintaksis:
əvvəlki + sonrakı {
xassə: dəyər;
xassə: dəyər;
}
/* <p> elementini seçir, hansı ki, <h1>-dən dərhal sonra gəlir */
h1 + p {
color: red;
}
<h1>Başlıq 1</h1>
<p>Bu abzas qırmızı olacaq, çünki o, "h1"-dən dərhal sonra gəlir.</p>
<p>Bu abzas qırmızı olmayacaq.</p>
5.5 Ümumi qonşu selektoru
Ümumi qonşu selektoru bütün elementləri seçir, hansı ki göstərilən elementdən sonra gəlir və eyni dərinlik səviyyəsində yerləşir.
Syntax:
əvvəlki ~ sonrakı {
xüsusiyyət: dəyər;
xüsusiyyət: dəyər;
}
Nümunə:
/* Eyni dərinlik səviyyəsində <p> olan bütün <h1>-dən sonra gələnləri seçir */
h1 ~ p {
color: purple;
}
<h1>Başlıq 1</h1>
<p>Bu abzas bənövşəyi olacaq.</p>
<p>Bu abzas da bənövşəyi olacaq.</p>
<div>
<p>Bu abzas bənövşəyi olmayacaq, çünki o, başqa bir dərinlik səviyyəsindədir.</p>
</div>
GO TO FULL VERSION