Сусідніми називаються елементи веб-сторінки, коли вони йдуть безпосередньо один за одним в коді документа. Розглянемо кілька прикладів відносини елементів.
<p> Lorem ipsum <b> dolor </b> sit amet. </p>
В цьому прикладі тег <b> є дочірнім по відношенню до тегу < ; p> , оскільки він знаходиться всередині цього контейнера. Відповідно <p> виступає в якості батька <b> .
<p> Lorem ipsum <b> dolor </b> <var> sit </var> amet. </p>
Тут теги <var> і <b> ніяк не перекриваються і являють собою сусідні елементи. Те, що вони розташовані всередині контейнера <p> , ніяк не впливає на їхнє ставлення.
<p> Lorem <b> ipsum </b> dolor sit amet, <i> consectetuer </i> adipiscing <tt> elit </tt> . </p>
Сусідніми тут є теги <b> і <i> , а також <i> і <tt> . При цьому <b> і <tt> до сусідніх елементів не належать через те, що між ними розташований контейнер <i> .
Для управління стилем сусідніх елементів використовується символ плюса (+), який встановлюється між двома селекторами. Загальний синтаксис наступний.
Селектор 1 + Селектор 2 {Опис правил стилю}
Прогалини навколо плюса не обов'язкові, стиль при такому записі застосовується до селектора 2, але тільки в тому випадку, якщо він є сусіднім для селектора 1 і варто відразу після нього.
у прикладі 11.1 показана структура взаємодії тегів між собою.
Приклад 11.1 . Використання сусідніх селекторів
HTML5 CSS 2.1 IE Cr Op Sa Fx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>
Сусідні селектори </title>
<style>
B + I {color: red; /* Червоний колір тексту */ } </style>
</head>
<body>
<p>
Lorem <b>
ipsum </b>
dolor sit amet, <i>
consectetuer </i>
adipiscing elit. </p>
<p>
Lorem ipsum dolor sit amet, <i>
consectetuer </i>
adipiscing elit. </p>
</body>
</html>
Результат прикладу показаний на рис. 11.1.
В даному прикладі відбувається зміна кольору тексту для вмісту контейнера <i> , коли він розташовується відразу після контейнера <b> . У першому абзаці така ситуація реалізована, тому слово « consectetuer » в браузері відображається червоним кольором. У другому абзаці, хоча і присутній тег <i> , але по сусідству ніякого тега <b> немає, так що стиль до цього контейнеру не застосовується.
Розберемо більш практичний приклад. Часто виникає необхідність в текст статті включати різні виноски та примітки. Зазвичай для цієї мети створюють новий стильовий клас і застосовують його до абзацу, таким способом можна легко змінити вигляд тексту. Але ми підемо іншим шляхом і скористаємося сусідніми селекторами. Для виділення зауважень створимо новий клас, назвемо його sic, і будемо використовувати його до тегу <h2> . Перший абзац після такого заголовка виділяється кольором фону і відступом (приклад 11.2). Вигляд інших абзаців залишиться незмінним.
Приклад 11.2. Зміна стилю абзацу
HTML5 CSS 2.1 IE Cr Op Sa Fx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>
Зміна стилю абзацу </title>
<style>
h2.sic {font-size: 140%; /* Розмір шрифту */ color: maroon; /* Колір тексту */ font-weight: normal; /* Нормальне накреслення тексту */ margin-left: 30px; /* Відступ зліва */ margin-bottom: 0px; /* Відступ знизу */ } h2.sic + P {background: #ddd; /* Колір фону */ margin-left: 30px; /* Відступ зліва */ margin-top: 0.5em; /* Відступ зверху */ padding: 7px; /* Поля навколо тексту */ } </style>
</head>
<body>
<h1>
Методи лову лева в пустелі </h1>
<h2>
Метод послідовного перебору </h2>
<p>
Нехай лев має габаритні розміри L x W x H, де L - довжина лева від кінчика носа до пензлика хвоста, W - ширина лева, а H - його висота. Після чого пустелю розбиваємо на ряд елементарних прямокутників, розмір яких збігається з шириною і довжиною лева. З огляду на, що лев може перебувати не строго на заданій ділянці, а одночасно на двох з них, клітку для лову варто робити підвищеної площі, а саме 2L x 2W. Завдяки цьому ми уникнемо помилки, коли в клітці виявиться спійманим лише половина лева або, що гірше, тільки його хвіст. </p>
<h2 class="sic">
Важливе зауваження </h2>
<p>
Для спрощення розрахунків хвіст в якості похибки вимірювання можна відкинути і не брати до уваги. </p>
<p>
Далі послідовно накриваємо кожен з розмічених прямокутників пустелі клітиною і перевіряємо, спійманий лев чи ні. Як тільки лев опиниться в клітці, процедура затримання вважається завершеною. </p>
</body>
</html>
Результат даного прикладу показаний на рис. 11.2.
В даному прикладі текст відформатований із застосуванням абзаців (тег <p> ), але запис h2.sic + P встановлює стиль тільки для першого абзацу що йде після тега <h2> , у якого доданий клас з ім'ям sic .
Сусідні селектори зручно використовувати для тих тегів, до яких автоматично додаються відступи, щоб самостійно регулювати величину відбиття. Наприклад, якщо поспіль йдуть теги <h1> і <h2> , то відстань між ними легко регулювати якраз за допомогою сусідніх селектор. Аналогічно справа йде і для йдуть підряд тегів <h2> і <p> , а також в інших подібних випадках. У прикладі 11.3 таким манером змінюється величина відступів між зазначеними тегами.
Приклад 11.3. Відступи між заголовками і текстом
HTML5 CSS 2.1 IE Cr Op Sa Fx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>
Сусідні селектори </title>
<style>
h1 + h2 {margin-top: -10px; /* Зміщуємо заголовок 2 вгору */ } h2 + P {margin-top: -1em; /* Зміщуємо перший абзац вгору до заголовку */ } </style>
</head>
<body>
<h1>
Заголовок 1 </h1>
<h2>
Заголовок 2 </h2>
<p>
Абзац! </p>
</body>
</html>
Оскільки при використанні сусідніх селектор стиль застосовується тільки до другого елементу, то розмір відступів зменшується за рахунок включення від'ємного значення у властивості margin-top . При цьому текст піднімається вгору, ближче до попереднього елемента.
Питання для перевірки
1. Які теги в даному коді є сусідніми?
<p> <b> Формула сірчаної кислоти: </b> <i> H <sub> < ; small> 2 </small> </sub> SO <sub> <small> 4 </small> </sub> </i> </p>
- <P> і <I>
- <B> і <I>
- <I> і <SUB>
- <SUB> і <SMALL>
- <I> і <SMALL>
2. Є наступний код HTML :
<p> <b> Велика теорема Ферма </b> </p> <p> <i> X <sup> <small> n </small> </sup> + Y <sup> <small> n </small> </sup> =Z <sup> <small> n </small> </sup> </i> </p> <p> де n - ціле число> 2 </p>
Який текст виділиться червоним кольором за допомогою стилю SUP + SUP {color: red; }?
- « X »
- « Y »
- « Z »
- Друга « n »
- Друга і третя « n ».
Відповіді
1. <B> і <I>
2. Друга і третя « n ».