CSS селектор - це формальний опис елементу або групи елементів.
JavaScript дозволяє отримати за допомогою CSS селектора елемент у методі document.querySelector(), або масив елементів у методі document.querySelectorAll(). CSS селектор у цих методах передається як рядок у якості параметру.
| CSS селектор | приклад | опис | приклад застосування у document.querySelectorAll() |
|---|---|---|---|
| * | "*" | всі елементи | кількість елементів у документі: var el=document.querySelectorAll("*");
alert("кількість елементів: "+el.length); |
| .class | ".test" | всі елементи за вказаним класом.<b class="test"></b> | var el=document.querySelectorAll(".test");
alert("кількість елементів класу test: "+el.length); |
| #id | "#test" | всі елементи за вказаним id. <b id="test"></b> | зміюємо колір усіх елементів з id=test: var el=document.querySelectorAll("#test");
for(i=0; i<el.length; i++)
el[i].style.color="red"; |
| element | "p", "a", "body" | елементи за вказаною назвою тегу. | var el=document.querySelectorAll("a");
alert("кількість елементів <a>: "+el.length); |
| X Y | "p a", "div p" | усі дочірні елементи Y які знаходяться у елементі X | var el=document.querySelectorAll("p b");
for(i=0; i<el.length; i++)
el[i].style.color="blue"; |
| X + Y | "div + p" | перший елемент Y який знаходиться після елементу X | змінюємо розмір шрифту перших елементів P, які знаходяться після елементу DIV: var el=document.querySelectorAll("div + p");
for(i=0; i<el.length; i++)
el[i].style.fontSize="24pt"; |
| X ~ Y | "div ~ p" | усі елементи Y які є після елемента X | змінюємо розмір шрифту усіх елементів P, які знаходяться після елементу DIV: var el=document.querySelectorAll("div + p");
for(i=0; i<el.length; i++)
el[i].style.color="blue"; |
| X > Y | "div > p" | безпосередньо прямі дочірні елементи Y, у яких батьком є X | var el=document.querySelectorAll("div > a");
alert("кількість прямих нащадків A від DIV: "+el.length); |
| X[attribute] | "a[title]", "p[class]", "a[href]" | елементи X з атрибутами attribute | var el=document.querySelectorAll("a[href]");
var s="список посилань елементу A: ";
for(i=0; i<el.length; i++)
s+='"'+el[i].href+'", ';
alert(s);
змінюємо колір елементів P з атрибутом title: var el=document.querySelectorAll("p[title]");
for(i=0; i<el.length; i++)
el[i].style.color="#"+(i*9)+"aa"; |
| X[attribute=value] | 'a[href="/"]', "p[title='text']" | елемент X у якому attribute дорівнює значенню value | var el=document.querySelectorAll('a[href="/"]');
alert("кількість елементів A href='/' :"+el.length); |
| X[attribute^="value"] | "a[href^='http']", "img[src^='/images/']" | елементи X у яких атрибут attribute містить значення яке починається з value | var el=document.querySelectorAll('a[href^="http"]');
alert("кількість елементів A де href починається з 'http': "+el.length); |
| X[attribute$="value"] | "a[href$='.php']", "img[src$='.jpg']" | елементи X у яких атрибут attribute містить значення яке завершується на value. | var el=document.querySelectorAll('a[href$=".php"]');
alert("кількість елементів A де href завершується на '.php': "+el.length); |
| X[attribute*="value"] | "a[href*='www']", "img[src*='?id=']" | елементи X у яких атрибут attribute будь де у значенні містить value. | var el=document.querySelectorAll('a[href*="/search/"]');
alert("кількість елементів A де href має '/search/': "+el.length); |
| X:not(selector) | "p:not(.test)", "*:not(p)" | всі елементи X крім selector. | var el=document.querySelectorAll("*:not(p)");
alert("кількість всіх елементів крім P: "+el.length); |
| :псевдокласи | ":focus", ":hover", ":checked", ":empty" | вибираються елементи по різним умовам | var el=document.querySelectorAll(":empty");
alert("кількість всіх елементів у яких немає дітей: "+el.length); |