CSS от А до Я: работа с селектором следующего элемента

CSS от А до Я: работа с селектором следующего элемента

От автора: приветствую вас в нашей серии уроков CSS от А до Я! В этой серии я расскажу вам про CSS значения и свойства, начинающиеся с различных букв алфавита. Иногда обучающего ролика бывает недостаточно, и в этой статье я дам вам пару быстрых советов по селектору следующего элемента.

G значит general sibling (селектор следующего элемента)

В видео на букву G мы узнали про селектор следующего элемента, с помощью которого можно стилизовать смежные теги. Существуют и другие смежные селекторы для перемещения вниз и вдоль дерева тегов.

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

Но есть и хорошая новость: разработчики добавили такую функцию в новую спецификацию CSS Selectors Level 4. Вот это да! Родительский селектор или, как разработчики его называют, субъект селектора позволяет выбрать родительский элемент для стилизации. В последнем черновике спецификации для выбора родительского тега по известному селектору используется восклицательный знак.

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

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

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

Автор: Guy Routledge

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree