Від автора: селектори – це серце CSS. Без селекторів змінювати CSS-властивості можна лише через атрибут style на елементі через инлайновые стилі, що незручно. Саме тому ми використовуємо селектори. Спочатку в CSS можна було шукати елементи за типом, класом та id. Це вимагало додавати атрибути класів і id розмітку, щоб потім можна було розрізнити елементи одного типу в стилях. В CSS2.1 з’явилися псевдоелементи, псевдокласи і комбінатори. У CSS3 нам наданий широкий набір селекторів, з допомогою яких ми можемо посилатися на майже будь-який елемент на сторінці.
Далі ми будемо підключати селектори з більш ранніх версій CSS, тому що вони входять до специфікації CSS Selectors Level 3 і все ще підтримуються. Хоча можна було б обійтися тільки селекторами з CSS3. Навіть за старими селекторам потрібно освіжити знання, так як в старій специфікації є свої приховані фокуси, про яких знають одиниці. Зверніть увагу, що всі сучасні браузери, включаючи IE9 і вище, підтримують всі CSS3-селектори.
Реляційні селектори
Реляційні селектори шукають елементи связам з іншими елементами в розмітці. Всі селектори даного типу підтримуються з IE7+ у всіх основних браузерах.
Комбінатори батьківських елементів (E F)
Цей тип селекторів ви повинні знати. Комбінатор батьківських елементів шукає всі елементи F, що є нащадком (вкладеність першого рівня, другого, третього і т. д.) елемента E. Наприклад, ol li знайде всі елементи li всередині впорядкованих списків. Це можуть бути li всередині ul, який, у свою чергу, вкладений у ol. Результат може бути не зовсім тим, який потрібен вам.
Комбінатори дочірніх елементів (E > F)
Цей селектор знаходить всі елементи F, що є прямим нащадком елемента E. Всі інші вкладені елементи ігноруються.
Продовжуючи приклад, запис ol > li знайде тільки елементи li, є першими дочірніми елементами тега ol, а всі вкладені елементи списку ul будуть пропущені.
Суміжні селектори (E + F)
Селектор цього типу знайде будь-який елемент F, у якого загальний батько з елементом E, а також який слід відразу після E в розмітці. Наприклад, li + li знайде всі теги li крім першого в заданому контейнері.
Родинний селектор (E ~ F)
Цей селектор дещо складніше. Родинний селектор знаходить всі елементи F, у яких загальний батько з E, і які йдуть після E в розмітці. Запис h1 ~ h2 знайде всі h2 після h1, у яких загальний прямий батько з h1. Тобто поки h2 не буде вкладений в інший елемент.
Розглянемо невеликий приклад:
Main title
This subtitle is matched
blah, blah, blah …
This is not matched by h1 ~ h2, but is by header ~ h2
blah, blah, blah …
Селектор h1 ~ h2 знайде перший h2, тому що h1 і h2 є дочірніми елементами (прямими спадкоємцями) тега header. Наступний за кодом h2 не потрапить у вибірку, так як його батьком є article. Якщо вказати селектор header ~ h2, то другий заголовок потрапить у вибірку. Точно так само h2 ~ p вибере тільки останній параграф, так як перед першим пунктом йде h2, і в h2 h1 загальний батько.
Зауваження: чому немає «батьківського» селектора?
Помітили, що досі ми не розповіли про «батьківський» селектор або селектор «предка», а також про «суміжний зліва» селектор? Продуктивність браузера, яка проходить дерево DOM в зворотному порядку або рекурсивно переходить в набори вкладених елементів перш, ніж вирішити, застосовувати чи ні стилі, виключила можливість вбудованих селекторів, йдуть «нагору по DOM-дерева».
В jQuery з’явився селектор предка :has(). Цей селектор хочуть додати в специфікацію CSS Selectors Level 4, але він поки ще не виконаний ні в одному браузері. Якщо і коли він буде реалізований, то ми за допомогою E:has(F) зможемо шукати E, в якому є нащадок F. Запис E:has(> F) буде шукати E, у якого є прямий дочірній елемент F. Запис E:has(+ F) буде шукати E, який є суміжним зліва для F і т. д.
Якщо зайти на сайт HTML5 Herald і відкрити стилі, то можна помітити, що ми використовували ці селектори в багатьох місцях. Наприклад, при визначенні загального макета сайту необхідно, щоб три колонки div ів були з лівим обтіканням. Щоб стилі не застосувались до div ам, вкладеним всередину колонок, ми використовуємо дочірній селектор:
main > div {
float: left;
overflow: hidden;
}
По мірі додавання стилів на сайт у наступних розділах ви побачите багато таких селекторів.
Селектори атрибутів
В CSS2 з’явилося кілька селекторів атрибутів. З їх допомогою можна шукати елементи по їх атрибутам. У CSS3 з’явилися додаткові селектори атрибутів, за допомогою яких можна шукати елементи за шаблоном. В CSS Selectors Level 4 їх стане ще більше: E[attr]
Знайде будь-який елемент з E атрибутом attr, незалежно від значення атрибута. Ми використовували цей селектор в Розділі 4 для стилізації обов’язкових полів. input:required працює лише в останніх версіях браузерів, а input[required] має той же ефект і працює в IE7 та IE8: E[attr=val]
Знаходить будь-який елемент з E атрибутом attr і значенням val. Селектор не новий, але з його допомогою зручно знаходити поля форми за типами. Наприклад, можна шукати чекбокси з допомогою input[type=checkbox]: E[attr|=val]
Знаходить будь-який елемент з E атрибутом attr і значенням val, або якщо значення атрибута починається на val-. Цей селектор найчастіше використовують для пошуку атрибут lang. Наприклад, p[lang|=”en”] знайде всі параграфи, в яких заданий англійську мову, будь то
або
: E[attr~=val]
Знаходить будь-який елемент з E атрибутом attr, в значенні якого є ціле слово val, відокремлене пробілами. Наприклад, .info[title~=more] знайде всі елементи з класом info, в яких є атрибут title зі словом more. Наприклад, якщо значення атрибута title одно буде «Click here for more information»: E[attr^=val]
Знаходить всі елементи E, значення атрибута attr в яких починається на val. Іншими словами, val є початком значення атрибута: E[attr$=val]
Знаходить всі елементи E, значення атрибута attr у яких закінчується на val. Іншими словами, val є кінцем значення атрибута: E[attr*=val]
Знаходить всі елементи E, в яких в атрибуті attr зустрічається значення val. Цей селектор схожий на E[attr~=val], тільки тут val може бути частиною слова. Візьмемо попередній приклад .fakelink[title*=info] {} знайде всі елементи з класом fakelink, у яких в атрибуті title є рядок info, наприклад, «Click here for more information».
В селекторах атрибутів значення val буде регистрозависимым для регистрозависимых значень в HTML. Наприклад, input[class^=”btn”] регистрозависимо, так як класи чутливі до регістру, а input[type=”checkbox”] не залежить від регістра, так як значення атрибуту type не залежить від регістра в HTML.
Якщо у значенні використовуються букви і цифри, лапки ставити не обов’язково. Є пара винятків. Порожні рядки, рядки, що починаються на числа, подвійне тире і т. д. обов’язково брати в лапки. Так як тут є винятки, краще всього взяти за звичку завжди ставити лапки навіть там, де вони не потрібні.
В CSS Selectors Level 4 можна буде відключати чутливість до регістру за допомогою символу i перед закриваючою дужкою, E[attr*=val i].
