CSS від А до Я: робота з селектором наступного елемента

29

Від автора: вітаю вас в нашій серії уроків CSS від А до Я! В цій серії я розповім вам про CSS значення і властивості, які починаються з різних букв алфавіту. Іноді навчального ролика буває недостатньо, і в цій статті я дам вам кілька швидких рад по селектору наступного елемента.

G значить general sibling (селектор наступного елемента)

У відео на літеру G ми дізналися про селектор наступного елемента, за допомогою якого можна стилізувати суміжні теги. Існують і інші суміжні селектори для переміщення вниз і вздовж дерева тегів.

А що робити, якщо потрібно вибрати селектор батьківського елемента? Незважаючи на безліч випадків, коли необхідно обрати батьківський елемент, знаючи будь-якого з його дочірніх, у нас ще немає такої можливості в CSS.

Але є і хороша новина-розробники додали таку функцію в нову специфікацію CSS Selectors Level 4. Ось це так! Батьківський селектор або, як його розробники називають, суб’єкт селектора дозволяє обрати батьківський елемент для стилізації. В останньому чернетці специфікації для вибору батьківського тега по відомому селектору використовується знак оклику.

Меню – класичний приклад, коли може виникнути потреба стилізувати батьківський тег. Меню зазвичай являє собою маркований список за набором елементів. Іноді в меню буває меню другого рівня у вигляді випадаючого списку. Без додавання класу досить складно стилізувати меню, якщо в ньому є підменю. Новий батьківський селектор дозволяє зробити це без додавання класу:

.main-menu li! .sub-menu {
/* стилі, показують, що у цього пункту є меню другого рівня */
}

Специфікація Level 4 Selectors все ще доопрацьовується, і я не знаю ні одного браузера, який би підтримував новий селектор. Але день релізу стане справжнім святом!