CSS/JS Selector nədir?
Selector — CSS və ya JavaScript-in hansı HTML elementini hədəf aldığını göstərən bir "ünvan" və ya *"işarə"*dir. Brauzerə deyir ki, "bu stilləri və ya bu dəyişikliyi məhz bu elementə tətbiq et."
Poçt ünvanı kimi düşünün
Məktub göndərmək üçün dəqiq ünvan lazımdır — küçə, ev nömrəsi, şəhər. Selector da eyni şeyi edir. Əgər düzgün selector yazmasanız, stil istədiyiniz elementə deyil, tamamilə başqa bir yerə tətbiq ola bilər, ya da skript ümumiyyətlə elementi tapa bilməz.
CSS Selector növləri
Əsas selectorlar
Element selectoru p — bütün paraqraflara tətbiq olunur (məsələn, p { color: black; }). Class selectoru .card — class-ı "card" olan bütün elementlərə tətbiq olunur (məsələn, .card { border-radius: 8px; }). ID selectoru #header — yalnız id-si "header" olan tək elementə tətbiq olunur (məsələn, #header { background-color: navy; }). **Universal selector *** isə səhifədəki bütün elementlərə tətbiq olunur (məsələn, * { margin: 0; }).
Atribut selectorları
HTML atributlarının dəyərinə görə element tapmağa imkan verir. Məsələn, input[type="text"] yalnız tipi "text" olan input-lara tətbiq olunur. a[href^="http"] isə href atributu "http" ilə başlayan (yəni xarici saytlara yönələn) bütün linkləri seçir.
Kombinatorlar (selectorlar arası əlaqə)
Selectorları bir-biri ilə əlaqələndirmək üçün 4 əsas işarə var: .card span (boşluq) — .card daxilindəki bütün span-ları, istənilən dərinlikdə seçir (törəmə əlaqəsi). .card > span — yalnız .card-ın birbaşa övladı olan span-ları seçir. h2 + p — h2-dən dərhal sonra gələn ilk paraqrafı seçir (qonşu element). h2 ~ p — h2-dən sonra eyni səviyyədəki bütün paraqrafları seçir (bütün sonrakı qonşular).
Pseudo-class və pseudo-element
Tez-tez qarışdırılır, amma fərqli anlayışlardır:
- Pseudo-class (tək iki nöqtə ilə yazılır, məsələn :hover) — elementin vəziyyətini təsvir edir: hover (kursor üzərinə gələndə), first-child (ilk övlad element), nth-child (sırayla neçənci olduğu), focus (fokusda olanda).
- Pseudo-element (cüt iki nöqtə ilə yazılır, məsələn ::before) — HTML-də birbaşa olmayan bir hissəni yaradır və ya seçir: before və after (elementdən əvvəl/sonra kontent əlavə edir), first-line (mətnin ilk sətri).
JavaScript-də selector
CSS-dən başqa, JavaScript-də də selectorlardan səhifədəki elementləri tapmaq üçün istifadə olunur. document.querySelector(".card") yazanda JavaScript "card" class-lı ilk elementi tapır. querySelectorAll isə həmin class-dan olan bütün elementləri (NodeList formasında) qaytarır. İstənilən düzgün CSS selectoru JavaScript-də də istifadə oluna bilər — məsələn, document.querySelector("input[type='text']").
Yəni selector — həm CSS-in (stilləşdirmə), həm də JS-in (elementləri tapıb idarə etmə) əsas alətidir.
Selectorları düzgün yazmaq niyə vacibdir
- Həddən artıq ümumi selector (məsələn, sadəcə div) planlaşdırılmayan elementləri də təsadüfən dəyişə bilər.
- Həddən artıq spesifik selector kodun saxlanmasını çətinləşdirir və CSS-də prioritet (specificity) münaqişələrinə səbəb ola bilər.
- JavaScript-də səhv selector sadəcə null qaytarır — mövcud olmayan elementə müraciət etmə cəhdi konsolda xəta yaradır.
Tez-tez verilən suallar
CSS selector sadə dillə nədir? Brauzerə hansı HTML elementinə stil tətbiq ediləcəyini göstərən qaydadır — məktub üçün dəqiq ünvan kimi, sadəcə HTML elementləri üçün.
Class ilə ID selector arasında fərq nədir? Class (.card) eyni səhifədə dəfələrlə, oxşar elementlər qrupu üçün istifadə oluna bilər. ID (#header) unikal olmalıdır və yalnız bir elementə tətbiq edilir.
Pseudo-class ilə pseudo-element arasında fərq nədir? Pseudo-class (:hover, :focus) mövcud elementin vəziyyətini təsvir edir. Pseudo-element (::before, ::after) isə HTML kodunda birbaşa olmayan bir hissə yaradır.
İstəyirsiniz ki, bu biliyi praktikaya keçirib real nəticələr əldə edəsiniz? IT və Kompüter Mühəndisliyi kursumuzla addım-addım öyrənməyə başlayın. Ətraflı məlumat üçün linkə keçid edin: IT və Kompüter Mühəndisliyi kursu