CSS урок 3. Контекстные, соседние и дочерние селекторы

Авторadmin / Опубликовано

Цель урока: знакомство с контекстными, дочерними и соседними селекторами css. Рассмотрены примеры создания стилей, приоритет селекторов

Назад
К оглавлению
Далее

Три вида взаимоотношений в дереве элементов

  1. Предки-потомки;
  2. Родитель-ребенок;
  3. Братья (соседи)

Рассмотри дерево элементов на примере:

1
2
3
4
5
6
7
8
9

<body>
<div>
   <h1>Заголовок</h1>
   <p><strong>Первый</strong> параграф в div</p>
   <p><strong>Второй</strong> параграф в div</p>
   <strong>Просто полужирный текст в div</strong>
</div>
<p><strong>Первый</strong> параграф в body</p>
</body>

Родительский элемент – тег, который содержит в себе рассматриваемый элемент.

В примере отношения родитель-ребенок:

  • Элемент div (2 строка) — родительский по отношению к тегу h1 (3 строка), тогда как h1 — напротив, дочерний элемент (ребенок)
  • Элемент p (4 строка) является родительским по отношению к strong (4 строка), тогда как strong — напротив, дочерний элемент (ребенок)
  • Элемент div (2 строка) является родительским по отношению к strong (6 строка), тогда как strong — напротив, дочерний элемент (ребенок)
  • Элемент p (8 строка) является родительским по отношению к strong (8 строка), тогда как strong — напротив, дочерний элемент (ребенок)
  • Элемент body (1 строка) является родительским по отношению к div (2 строка) и p (8 строка)

Предок – элемент, который располагается на несколько уровней выше и содержит в себе рассматриваемый элемент.

В примере отношение предок-потомок:

  • Элемент body является предком для элементов h1(3 строка), p и strong (4 строка), p и strong (5 строка), strong (6 строка) и strong (8 строка); в то время как все, перечисленные элементы являются потомками body
  • Элемент div (2 строка) является предком для элементов strong (4 и 5 строка); в то время как strong является потомком для div

Братский элемент (соседний) – элемент, который имеет общий родительский элемент с рассматриваемым.

В примере отношение соседи (братья):

  • Элементы h1 (3 строка), p(4 строка), p(5 строка) и strong(6 строка) являются братьями или соседними элементами.
  • Элементы div(2 строка) и p(8 строка) являются братьями или соседними элементами.

Контекстные селекторы CSS (предки-потомки)

Правила контекстных селекторов также распространяются и на отношение родитель-ребенок.

Синтаксис:

x y{
  свойство1: значение;
  свойство2: значение;
}

x — селектор-предок, y — селектор-потомок
Правило будет действовать на селектор y

Пример: В html-код страницы необходимо добавить правило для контекстных селекторов:

1
2
3
4
5

<body>
  <p><b>Жирное начертание текста</b></p> 
  <p><i><b>Одновременно жирное начертание текста 
     и выделенное цветом</b></i></p> 
</body>

Необходимо: Создать правило контекстных секторов для элемента b

Выполнение:

<style type="text/css">
p b{
	font-family: Times, serif; /* Семейство шрифта */
	font-weight: bold; /* Жирное начертание */
	color: navy; /* Синий цвет текста */
}
</style>

Результат:

Контекстные селекторы CSS

В примере отношение предок-потомок характерно для элементов p и b в третьей строке. Но контекстные селекторы распространяются и на отношения родитель-ребенок, т.е. в примере — элементы p и b во второй строке.

Рассмотрим еще примеры, иллюстрирующие использование контекстных селекторов:
контекстные селекторы css

Соседние селекторы CSS (братья)

Синтаксис:

x + y{
  свойство1: значение;
  свойство2: значение;
}

Стиль применяется для соседнего селектора y

Пример: В hrml-код страницы необходимо добавить правило для соседних селекторов:

<p><b>Студенты</b> - это <i>всезнающий</i> народ.</p>

Необходимо: Создать правило для соседнего селектора i

Выполнение:

b + i{
  color: red;
}

Результат:

Соседние селекторы CSS пример

В примере теги i и b не перекрываются между собой другими элементами и поэтому представляют собой соседние селекторы. То, что они расположены внутри элемента p, никак не влияет на их отношение.

Дочерние селекторы в CSS (селектор родитель-ребенок)

Синтаксис:

x > y{
  свойство1: значение;
  свойство2: значение;
}

Здесь x — родитель, y — ребенок
Правило будет действовать на дочерний селектор y

Пример: В hrml-код страницы необходимо добавить правило для дочернего селектора:

1
2
3

<div><i>Кто на горе</i>, тот раньше солнце встретит.
</div>
<div><p><i>Кто средь друзей</i>, тот силой не шути.</p> </div>

Необходимо: создать правило для дочернего селектора i (1 строка)

Выполнение:

div > i{
  color: red;
}

Результат:

пример дочернего селектора в css

В третьей строке примера тег i не является дочерним для тега div, так как они перекрываются тегом p.

Задание: Создайте всевозможные правила для стилизации каждого из селекторов в расположенном ниже фрагменте кода:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<html>
<head>
  <style type="text/css">
  ...
  </style>
</head>
<body> 
<h1 id="header1"><i>Стихотворение</i> <u>2013 год</u></h1>
<h2>I</h2>
<p>В земные страсти вовлеченный, 
я знаю, что из тьмы на свет 
однажды выйдет ангел черный 
и крикнет, что спасенья нет. </p>
<h2>II</h2>
<p>Но простодушный и несмелый, 
прекрасный, как благая весть, 
идущий следом ангел белый 
прошепчет, что надежда есть.</p>
<p class="end">Конец</p>
<h1>Продолжение следует</h1>
</body> 
</html>

Используйте CSS-свойства для оформления текста и для форматирования шрифта.

Назад
К оглавлению
Далее