При створенні веб-сторінки часто доводиться вкладати одні теги всередину інших. Щоб стилі для цих тегів використовувалися коректно, допоможуть селектори, які працюють тільки в певному контексті. Наприклад, поставити стиль для тега <b> тільки коли він розташовується всередині контейнера <p> . Таким чином можна одночасно встановити стиль для окремого тега, а також для тега, який знаходиться всередині іншого.
Контекстний селектор складається з простих селектор розділених пропуском. Так, для селектора тега синтаксис буде наступний.
Тег1 Тег2 {...}
В цьому випадку стиль буде застосовуватися до Тегу2 коли він розміщується всередині Тега1, як показано нижче.
<Тег1> <Тег2> ... </Тег2> </Тег1>
Використання контекстних селекторів продемонстровано в прикладі 10.1.
Приклад 10.1. Контекстні селектори
HTML5 CSS 2.1 IE Cr Op Sa Fx
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> Контекстні селектори </title> <style> PB {font-family: Times, serif; /* Сімейство шрифту */ color: navy; /* Синій колір тексту */ } </style> </head> <body> <div> <b> Жирне накреслення тексту </b> </div> <p> <b> Одночасно жирне накреслення тексту і виділене кольором </b> </p> </body> </html>
В даному прикладі показано звичайне застосування тега <b> і цього ж тега, коли він вкладений всередину абзацу <p> . При цьому змінюється колір і шрифт тексту, як показано на рис. 10.1.
Не обов'язково контекстні селектори містять тільки один вкладений тег. Залежно від ситуації допустимо застосовувати два і більш послідовно вкладених один в одного тегів.
Ширші можливості контекстні селектори дають при використанні ідентифікаторів і класів. Це дозволяє встановлювати стиль тільки для того елемента, який розташовується усередині певного класу, як показано в прикладі 10.2.
Приклад 10.2. Використання класів
HTML5 CSS 2.1 IE Cr Op Sa Fx
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> Контекстні селектори </title> <style> A {color: green; /* Зелений колір тексту для всіх посилань */ } .menu {padding: 7px; /* Поля навколо тексту */ border: 1px solid #333; /* Параметри рамки */ background: #fc0; /* Колір фону */ } .menu A {color: navy; /* Темно-синій колір посилань */ } </style> </head> <body> <div class="menu"> <a href="/1.html"> Російська кухня </a> | <a href="/2.html"> Українська кухня </a> | <a href="/3.html"> Кавказька кухня </a> </div> <p> <a href="/text.html"> Інші матеріали по темі </a> </p> </body> </html>
Результат даного прикладу показаний на рис. 10.2.
В даному прикладі використовується два типи посилань. Перше посилання, стиль якої задається за допомогою селектора A, буде діяти на всій сторінці, а стиль другої посилання ( . Menu A ) застосовується тільки до посилань всередині елемента з класом menu .
При такому підході легко керувати стилем однакових елементів, на зразок зображень і посилань, оформлення яких має відрізнятися в різних областях веб-сторінки.
Питання для перевірки
1. Який колір буде у тексту списку в наступному коді?
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> Контекстні селектори </title> <style> UL LI UL {color: green; } UL UL {color: red; } LI SPAN {color: blue; } LI LI {color: fuchsia; } UL SPAN {color: orange; } </style> </head> <body> <ul> <li> <ul> <li> <span> Перший </span> </li> <li> <span> Другий </span> </li> <li> <span> Третій </span> </li> </ul> </li> </ul> </body> </html>
- Зелений.
- Червоний.
- Синій.
- Рожевий.
- Помаранчевий.
2. У коді вище якого кольору будуть маркери перед текстом?
- Зеленого.
- Червоного.
- Синього.
- Рожевого.
- Помаранчевого.
Відповіді
1. Помаранчевий.
2. Рожевого.