CSS seçiciləri

CSS-in güclü olmasının ən böyük səbəbi HTML elementləri arasındakı əlaqədən faydalanmasıdır. HTML sənədləri gizli bir iyerarxiya ilə yaradılır. Bu iyerarxiya içində bütün HTML elementləri özlərinə uyğun bir yer tapır. Bu əlaqəni biz soy ağacına bənzədə bilərik.

 

Yuxarıdakı html quruluşunu bir soy ağacı kimi düşünüb qiymətləndirək: Bir elementin valideynlər (ana-ata) olduğunu anlamaq üçün o elementin altında başqa element olub olmadığına baxmalıyıq, əgər varsa o element valideynlərdir. Yuxarıdakı şəkildə p elementinə diqqət yetirək. p bir valideyndir, çünki altında em və strong elementləri var. strong da bir valideyndir, çünki onun altında a elementi vardır. Bir elementin uşaq element olduğunu anlamaq üçün də üstündə bir elementin olub olmadığına baxmalıyıq. Yəni yuxarıdakı hadisənin tərsi. Deməli, strong elementi p elementinin uşağıdır. Daha qarışıq strukturlarda ata (ancestor)nəvə (descendant) əlaqəsi vardır. Aradakı fərq əgər bir element digər elementin tam olaraq bir səviyyə üstündədirsə o ata, digəri də nəvə vəziyyətindədir. Yuxarıdakı şəkili araşdırsaq, ilk ul elementinin iki ədəd li uşaq elementi var və bu iki li elementinin altındakı bütün elementlər ilk ul elementinin nəvə elementləridir.

 

Nəvə Seçiciləri (Descendant Selectors)
Nəvə seçicilərinin digər bir adı da iç-içə seçicilərdir. Nəvə Seçicilərə edilən dəyişiklik yalnız müəyyən olunmuş elementlərə tətbiq olunur, bu qaydaların xaricində qalanlara isə tətbiq olunmur. Nümunə olaraq, bir h1 elementinin em nəvə elementinə müəyyən bir stil tətbiq etməliyik.
h1 em { 
    color: gray; 
}
Bu kod atası h1 olan bütün em elementlərini boz rəngdə edəcək. Digər em-lərə isə bu qayda tətbiq olunmayacaq. Nəvə Seçicilər, seçici qismi bir-birindən bir boşluqla ayrılmış iki və ya daha çox seçicidən meydana gəlir. Aradakı boşluq bağlayıcı xüsusiyyət daşıyır. Yalnız iki elementlə məhdud deyilik, sərhədsiz element təyin edə bilərik. 
ul ol ul em {
    color: gray; 
}
Nəvə Seçicilər çox qüvvətli ola bilirlər. Onlar HTML ilə edilməsinin imkanı olmayan işləri edirlər. Məsələn, iki ədəd sahə yaratdığımızı düşünək. Birinci sahənin arxa fonu (background) mavi, ikinci sahəsnin arxa fonunun isə ağ olduğunu düşünək və hər iki sahənin içində linklər olduğunu fərz edək. Bütün linkləri mavi rəng etmək olmayacaq, çünki ilk sahənin arxa fonu mavi olduğundan linklər görünməyəcək. Həll nəvə seçicilərindədir. İlk sahə içindəki linklərə başqa, digər sahədəki linklərə başqa rəng verərək bu işi həll edə bilərik.
td.sidebar {
    background: blue;
}
td.main {
    background: white;
}
td.sidebar a:link {
    color: white;
}
td.main a:link {
    color: blue;
}
Bir nümunə daha verək. blockquote və p elementləri içindəki b elementlərində xüsusi bir dəyişiklik etmək istəyirik. Bunun üçün kodu belə yazmalıyıq:
blockquote b, p b { 
}
Koda diqqət yetirsək görərik ki, hər iki dəyişikliyi ayrı ayrı yazmaq yerinə araya bir vergül qoyaraq birlikdə yazmaq olar.
 
Uşaq Seçiciləri
Bəzi vəziyyətlərdə nəvə seçicisi istifadə etməkdənsə daha dəqiq seçim etmək istəyə bilərik. Məsələn h1 elementinin altındakı strong elementlərindən yalnız uşaq elementi üçün dəyişiklik etmək istəsək (nəvə elementlərindən başqa), bunun üçün uşaq bağlayıcısından istifadə etməliyik ( > ).
h1 > strong { 
    color: red; 
}
HTML-da
<h1>Bu <strong>koda</strong> tətbiq olunacaq.</h1>
<h1>Bu <em>koddakı <strong> bu hissəyə </strong></em> aid deyil.</h1>
Yuxarıdakı vəziyyətdə yalnız ilk strong elementi üçün dəyişiklik reallaşacaq, ikincisi üçün hər hansı bir stil tətbiq olunmayacaq.

CSS seçiciləri


Yuxarıdakı şəkildə əsas nümunəmizin bir qismi göstərilir. Valideyn-uşaq əlaqəsini daha yaxşı anlamaq üçün hazırlanmışdır. a elementi strong-un valideynidir. p elementi də a-nın valideynidir. Ancaq p elementi strongun valideynləri deyil. Biz burada p > a və a > strong şəklində dəyişiklik edə bilərik, ancaq p > strong formasında edə bilmərik. Bir də eyni seçici içində həm nəvə birləşdiricisini, həm də uşaq birləşdiricisini istifadə edə bilərik.
 
Bitişik Qardaş Seçicilər
Bitişik Qardaş Seçiciləri bir-birinin ardınca gələn eyni səviyyədəki elementlərdən sonra gələnlərə stil təyin etmək üçün istifadə edilir. Tam olaraq "Bir Kiçik Qardaş Seçicisi" olmalıdır. Bir nümunə verək: Bir başlığımız var və sonrasında ard-arda paraqraflar gəlir. Biz başlıq ilə dərhal ardınca gələn paraqrafın arasına məsafə qoymaq üçün bu seçicini istifadə edə bilərik. 
<body>
    <h2>Başlıq 2</h2>
    <h3>Başlıq 3</h3>
    <p>Xpert.az-da <em>yeni</em> və <strong>vacib</strong>dərslikləri tapa bilərsiniz</p>
    <p>Xpert.az-da <em>yeni</em> ve <strong>vacib</strong>dərslikləri tapa bilərsiniz</p>
</body>
Sənədin quruluşu:

 

Biz burada h2 və h3 arasında boşluq vermək üçün aşağıdakı kodu istifadə edə bilərik: 

h2 + h3 { 
    margin-top: 10px; 
}
Bu sayədə bir çox kod yığınından xilas olmuş oluruq və kodlarımız nizamlı qaydaya düşür. Bu qaydaları tətbiq etdikcə əhəmiyyətini daha yaxşı anlayacağıq.
 
Ümumi Seçicilər
Bir dəyişikliyin bütün elementlərə tətbiq olunmasını istəyiriksə * işarəsindən istifadə etməliyik. Məsələn, aşağıdakı kod bütün elementləri qırmızı edəcək.
* { 
    color:red; 
}
Eləcə də bir layın içindəki bütün siniflərə tətbiq etmək istəsək:
div .elan * { 
    color:red; 
}
.elan sinfi içindəki bütün elementlər qırmızı olacaqdır.
CSS3