Главная > Основы языка гипертекстовой разметки HTML и CSS
НАПИШУ ВСЁ ЧТО ЗАДАЛИ
СЕКРЕТНЫЙ БОТ В ТЕЛЕГЕ

Распознанный текст, спецсимволы и формулы могут содержать ошибки, поэтому с корректным вариантом рекомендуем ознакомиться на отсканированных изображениях учебника выше

Также, советуем воспользоваться поиском по сайту, мы уверены, что вы сможете найти больше информации по нужной Вам тематике

ДЛЯ СТУДЕНТОВ И ШКОЛЬНИКОВ ЕСТЬ
ZADANIA.TO

4.7. Выбор сестринских элементов

В каскадных таблицах стилей существуют селекторы, позволяющие выбирать следующий элемент за текущим, имеющего того же родителя. Такие элементы называются сестринскими. Например, если нужно выделить первый абзац, следующий за заголовком h1, то можно применить такой селектор:

h1 + p {padding: 10px; background: f7f7f7;}

Такая запись будет указывать браузеру найти на странице все заголовки с тегом <h1> и применить стиль только для первого найденного абзаца <p>, следующего за этим заголовком:

<h1>Заголовок 1</h1>
<p>Первый абзац, следующий за заголовком 1<p>
<p>Второй абзац, следующий за заголовком 1<p>

В итоге первый абзац будет иметь указанный стиль, а второй отобразится со стилем по умолчанию.

Обратите внимание, что в отличии от выбора первого дочернего элемента, сестринские элементы находятся на одном уровне иерархии, т.е. имеют единого родителя. В предыдущем примере заголовок h1 и параграф p имеют единого родителя body. Если это условие не выполняется, то соответствующий сестринский элемент найден не будет.

В CSS допускается комбинировать селекторы разных типов, например, выбор дочерних и сестринских элементов. Следующая запись позволяет выбрать сестринский элемент span у первого дочернего элемента p тега div:

div > p + span {color: red}

Следует отметить, что селекторы выбора дочерних и сестринских элементов поддерживаются браузером Internet Explorer, начиная с версии 7.0

1
Оглавление
email@scask.ru