CSS селектор

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 які знаходяться у елементі Xvar 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, у яких батьком є Xvar el=document.querySelectorAll("div > a"); alert("кількість прямих нащадків A від DIV: "+el.length);
X[attribute]"a[title]", "p[class]", "a[href]"елементи X з атрибутами attributevar 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 дорівнює значенню valuevar el=document.querySelectorAll('a[href="/"]'); alert("кількість елементів A href='/' :"+el.length);
X[attribute^="value"]"a[href^='http']", "img[src^='/images/']"елементи X у яких атрибут attribute містить значення яке починається з valuevar 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);