Press shift question mark to access a list of keyboard shortcuts
Этот скринкаст является частью нашей серии CSS AtoZ. Вы можете найти другие записи серии здесь .
расшифровка
Общий брат — малоизвестный, но очень полезный селектор CSS
Это позволяет стилизовать элемент, который является родным элементом другого.
Мы рассмотрим синтаксис, практический пример и затем краткий обзор других дочерних и родственных селекторов в CSS.
Синтаксис
Общий селектор одноуровневых элементов является частью семейства селекторов комбинаторов в CSS и идентифицируется символом тильда ~ Это выглядит примерно так:
h2 ~ p {
color: red;
}
Этот селектор будет стилизовать любые абзацы, которые являются родственными элементами заголовка второго уровня и встречаются после <h2>
Преимущество этого селектора в том, что абзацы не обязательно должны быть смежными братьями и сестрами <h2>
<article>
<h1>Lorem ipsum</h1>
<p>Dolor sit amet</p>
<h2>Lorem ipsum</h2>
<p>Dolor sit amet</p>
<h3>Lorem ipsum</h3>
<p>Dolor sit amet</p>
</article>
В этом фрагменте кода оба абзаца после <h2><h2>
Это может немного сбивать с толку, поскольку все абзацы можно назвать «общими братьями и сестрами» друг друга, но селектор не будет соответствовать первому. Это может быть причиной того, что этот селектор был переименован в спецификации CSS Selectors Level 4 в селектор «следующего брата».
<h2>Lorem ipsum</h1>
<div>
<p>Dolor sit amet</p>
</div>
В этом случае, даже несмотря на то, что абзац идет после <h2><h2>
Практический пример
Давайте посмотрим на практический пример.
В приведенных ниже сочетаниях «Сводка» и «Стенограмма» используется общий селектор брата для определения открытого / закрытого состояния каждого раздела. Все это поведение чисто обрабатывается в CSS; здесь нет Javascript!
Разметка для заголовков каждого раздела имеет скрытый <input><h1><label><div>
Нажав на метку, переключаем :checked.accordion-content
Когда вход не проверен, max-height Когда вход проверен, max-height Применение небольшого перехода дает плавную скользящую анимацию.
input ~ .episode-accordion {
max-height: 0;
}
input:checked ~ .episode-accordion {
max-height: 10000px;
}
.episode-accordion {
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
Другие селекторы для детей и братьев и сестер
Поскольку это был довольно короткий эпизод, давайте посмотрим на некоторые другие селекторы комбинаторов, доступные в CSS. Они поддерживаются начиная с IE7, который должен хорошо и действительно охватывать подавляющее большинство сценариев использования.
Потомок селектор
Селектор потомков существует с незапамятных времен и выбирает элементы, соответствующие второму селектору, в то время как первый селектор является предком.
div p {
color: red;
}
Этот селектор сделает все абзацы в любом дочернем элементе любого <div>
Выбор внука
Селектор Grandchild аналогичен селектору потомков, но выбирает элементы, соответствующие второму селектору, если они являются потомками любого дочернего элемента первого селектора. Он использует символ звездочки, но важно отметить, что это не то же самое, что подстановочный знак или универсальный «звездный» селектор.
div * p {
color: red;
}
Этот селектор сделает все абзацы в дочерних элементах красного цвета <div>
Выбор ребенка
Дочерний селектор, обозначенный знаком больше, выбирает элементы, соответствующие второму селектору, которые являются прямыми дочерними элементами, соответствующими первому селектору.
div > p {
color: red;
}
Этот селектор сделает все абзацы, которые являются дочерними элементами <div>
Соседний Брат
Селектор соседнего брата похож на обычный селектор брата и обозначен знаком + Этот селектор будет стилизовать элементы, соответствующие второму селектору, если они появятся сразу после элемента, соответствующего первому селектору.
div + p {
color: red;
}
Этот селектор сделает любые параграфы, которые непосредственно следуют за <div>
Как я упоминал ранее, все эти селекторы доступны в IE7 +, поэтому вы можете (почти наверняка) использовать их прямо сейчас. Надеюсь, они пригодятся для вашего следующего проекта.
В приведенном выше видео, охватывающем букву G, мы рассмотрели селектор General Sibling, который позволяет стилизовать элемент родственного элемента. Есть также другие дочерние и родственные селекторы для перемещения вниз / через дерево элементов.
Но как насчет родительских селекторов? Что ж, несмотря на многочисленные случаи использования необходимости выбора родительского элемента на основе того, содержит ли он определенные дочерние элементы, эта функция в настоящее время недоступна в CSS.
Но хорошая новость заключается в том, что они попали в спецификацию CSS Selector Level 4. Ву Ху! Родительский селектор, или тема селектора, как его еще называют, позволяет выбрать родительский элемент для стиля. Последний вариант спецификации использует восклицательный знак после заданного селектора для установки элемента темы.
Классический пример того, когда вы можете захотеть стилизовать родительский элемент, находится в меню. Меню навигации обычно представляет собой неупорядоченный список с серией пунктов списка. Иногда у вас может быть подменю, которое может быть показано или скрыто как раскрывающийся список. Всегда было сложно стилизовать родительский элемент списка, который имеет подменю, без добавления класса. С новым родительским селектором можно достичь без одного:
.main-menu li! .sub-menu {
/* add styles to signify that this item has a submenu */
}
Спецификация селекторов уровня 4 все еще находится в стадии разработки, и я не знаю ни одного браузера, который бы все это поддерживал. Но когда он выйдет, это будет замечательный день!