От автора: приветствую вас в нашей серии уроков CSS от А до Я! В этой серии я расскажу вам про CSS значения и свойства, начинающиеся с различных букв алфавита. Иногда обучающего ролика бывает недостаточно, и в этой статье я дам вам пару быстрых советов по селектору следующего элемента.
G значит general sibling (селектор следующего элемента)
В видео на букву G мы узнали про селектор следующего элемента, с помощью которого можно стилизовать смежные теги. Существуют и другие смежные селекторы для перемещения вниз и вдоль дерева тегов.
А что делать, если нужно выбрать селектор родительского элемента? Несмотря на множество случаев, когда необходимо выбрать родительский элемент, зная какой-либо из его дочерних, у нас еще нет такой возможности в CSS.
Но есть и хорошая новость: разработчики добавили такую функцию в новую спецификацию CSS Selectors Level 4. Вот это да! Родительский селектор или, как разработчики его называют, субъект селектора позволяет выбрать родительский элемент для стилизации. В последнем черновике спецификации для выбора родительского тега по известному селектору используется восклицательный знак.
Меню – классический пример, когда может возникнуть потребность стилизовать родительский тег. Меню обычно представляет собой маркированный список с набором элементов. Иногда в меню бывает меню второго уровня в виде выпадающего списка. Без добавления класса довольно сложно стилизовать меню, если в нем есть подменю. Новый родительский селектор позволяет сделать это без добавления класса:
|
1 2 3 |
.main-menu li! .sub-menu { /* стили, показывающие, что у этого пункта есть меню второго уровня */ } |
Спецификация Level 4 Selectors все еще дорабатывается, и я не знаю ни одного браузера, который бы поддерживал новый селектор. Но день релиза станет настоящим праздником!
Автор: Guy Routledge
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
