Selectors Level 4 – попередній огляд
Поки компанії-розробники браузерів напружено працюють, щоб реалізувати можливості, надані CSS3, а розробники інтерфейсів створюють все більше відповідних інструментів для більш ефективної роботи з таблицями стилів, вже з’явився малюнок 4 версії стандарту.
Публікація документа “Selectors Level 4” зовсім не означає, що CSS3 застарів, а швидше свідчить про природний процес еволюції CSS загалом. До того ж він ще не набув статусу офіційної рекомендації і є лише чорновим начерком, на який не можна розраховувати, адже в документ неодмінно будуть внесені значні зміни.
В даний час CSS-специфікації можуть розроблятися незалежно один від одного, що є величезною перевагою: швидке завершення документа та усунення поточних проблем просуває Web вперед, дозволяючи відразу задіяти нові специфікації.
Більшість селекторів 4 рівня є псевдокласами, багато з яких отримали нові цікаві доповнення.
Логіко-комбінаторні селектори: :matches, :not
Деяким псевдоклас :matches може бути знайомий по :moz-any(), колись реалізованому в Mozilla Firefox 4. Завдяки йому можна згрупувати велику кількість схожих селекторів, наприклад, об’єднати численні значення html-якорів в одне. Тобто натомість:
<p dir="ltr">ul.menu li a:link,</p> <p dir="ltr">ul.menu li a:hover,</p> <p dir="ltr">ul.menu li a:visited,</p> <p dir="ltr">ul.menu li a:focus {</p> <p dir="ltr">color: red;</p> <p dir="ltr">}</p>Можна одразу зробити це:
<p dir="ltr">ul.menu li a:matches(:link, :hover, :visited, :focus) {</p> <p dir="ltr">color: red;</p> <p dir="ltr">}</p>Простий псевдоклас заперечення: not був представлений і в специфікації CSS3, але в CSS4 він став набагато потужнішим: тепер його можна застосовувати як до складних селекторів, так і до списку селекторів. Наприклад, можна виділити червоним усі параграфи, яким не призначено активний чи видимий клас:
<p dir="ltr">p:not(.active, .visible) {</p> <p dir="ltr">color: red;</p> <p dir="ltr">}</p>Локаційні псевдокласи: :any-link, :local-link
Завдяки цим псевдокласам краще контролювати стиль посилань.
Псевдоклас :any-link (у документі вказано, що назва є тимчасовою і її можна змінити) дозволяє об’єднати значення a:link і a:vizited і вказує на посилання незалежно від того, чи здійснювався за ними перехід:
<p dir="ltr">a:any-link {</p> <p dir="ltr">color: red;</p> <p dir="ltr">}</p>:local-link вказує на локальні посилання та допомагає виділити посилання, що веде на домашню сторінку, іншим стилем, не торкаючись інших. Крім того, є можливість використовувати :local-link з параметром: число, вказане у дужках, вказує на відповідний рівень URL-шляху:
<p dir="ltr">nav :local-link(0) {</p> <p dir="ltr">color: red;</p> <p dir="ltr">}</p> <p dir="ltr">nav :local-link(1) {</p> <p dir="ltr">color: green;</p> <p dir="ltr">}</p> <p dir="ltr">nav :local-link(2) {</p> <p dir="ltr">color: blue;</p> <p dir="ltr">}</p> <p dir="ltr">nav :local-link(3) {</p> <p dir="ltr">color: yellow;</p> <p dir="ltr">}</p> <p dir="ltr">nav :local-link(4) {</p> <p dir="ltr">color: gray;</p> <p dir="ltr">}</p>Тимчасові псевдокласи: :past, :current, :future
Ці псевдокласи особливо стануть у нагоді при створенні програм-суфлерів і програм для читання субтитрів: за допомогою однієї команди можна призначити власний стиль елементам кожного тимчасового відрізка: :past для обробленого елемента, :current для оброблюваного і т.п.:
<p dir="ltr">p:current {</p> <p dir="ltr">background: yellow;</p> <p dir="ltr">}</p>Псевдоклас інтерфейсу користувача
Крім вже відомих ¦:enabled, :disabled або :checked у 4 специфікації з’явився новий псевдоклас :indeterminate, призначений для елементів, що мають невизначений статус. Таким чином, можна створювати стиль для тих елементів, які ще не були використані:
<p dir="ltr">input.checkbox:indeterminate {</p> <p dir="ltr">background: #ccc;</p> <p dir="ltr">}</p>Псевдокласи структури дерева: :nth-match, :nth-last-match
Псевдоклас :nth-match поєднує можливості :nth-child та :matches.
Наприклад, у вас є список посилань, деяким з яких надано активний клас, і ви хочете виділити лише парні активні посилання. Якщо використовувати :nth-child(even), ви зможете вибрати усі парні посилання зі списку, але не зможете обмежитись лише активними. Якщо ж застосувати: matches (. active), результатом стане виділення всіх активних елементів, що теж не є вашою метою. Завдяки :nth-match, ви зможете за допомогою всього 1 команди виділити парні активні посилання зі списку:
<p dir="ltr">li a:nth-match(even of .active) {</p> <p dir="ltr">color: red;</p> <p dir="ltr">}</p>:nth-last-match працює за таким самим принципом, але починає виділення з кінця DOM-структури.
Псевдокласи структури сітки: :column, :nth-column, :nth-last-column
Html-таблиці орієнтовані на роботу з рядками: створити таблицю для роботи з колонками можна, але одночасно працювати з рядками і колонками не вдасться. Нові псевдокласи дозволяють створювати стиль клітини на основі її приналежності до колонки, а не до рядка:
<p dir="ltr">:column(.total) {</p> <p dir="ltr">background: red;</p> <p dir="ltr">}</p> <p dir="ltr">:nth-column(even) {</p> <p dir="ltr">background: blue;</p> <p dir="ltr">}</p>Втім, :column, :nth-column, :nth-last-column призначені не тільки для роботи з таблицями, але і вертикально орієнтованими шаблонами.
Parent selector
Довгоочікуваний багатофункціональний селектор, що дозволяє працювати з елементами, не використовуючи звичні селектори і створювати стиль для всього списку.
Таким чином, специфікація селекторів 4 рівня пропонує багато цікавих рішень. Залишається лише дочекатися того часу, коли вони будуть реалізовані у браузерах.
