Взаимоотношения между тэгами в коде HTML. Урок №3

Селекторы в таблице стилей можно записывать в виде комбинаций. Это делается для того, чтобы более точно указать на элемент, к которому следует применить те или иные правила. Эти комбинации имеют непосредственное отношение к коду HTML, а точнее, к его структуре (так называемому "дереву"). Наш код, если он записан правильно, имеет структуру, похожую на некое "дерево" с узлами и ответвлениями. Как генеалогическое древо. Здесь есть свои предки и потомки, родители и дети, а также братья. Данное понимание взаимоотношений между тэгами очень поможет Вам в изучении дальнейших материалов в этом разделе.

Так вот в коде HTML наших документов есть три вида взаимоотношений между тэгами:
1. Предки и потомки.
Допустим, что у нас есть следующий код:
predki.JPG
Здесь потомками тэга <body> являются все тэги, которые находятся внутри него. Это тэги <div>, первый <p>, второй <p>, и 3-й <p>. Это четко видно в коде, так как в данном случае, он записан правильно – с табуляцией. А сам <body> является предком всех тэгов, входящих в него.

2. Родители и дети.
В том же коде - ближайшие элементы, один из которых находится внутри другого относятся друг к другу, как родитель и ребенок. Например, здесь мы видим, что внутри <div> находятся три тэга <p>, так вот <div> - это родитель а все тэги <p> - его дети.
Важно: у одного родителя может быть несколько детей, а вот у детей всего лишь один родитель!
Причем, если бы в тэге <p> стоял тэг <span>, то для него тэг <div> уже не являлся бы родителем, а родителем был бы тэг <p>, а тэг <div>, был бы всего лишь одним из предков.

3. Братья
Все тэги, имеющие одного родителя, являются братьями, или их еще называют родственниками, но я считаю, что это не очень правильно, потому что предки – это тоже родственники по сути. В том же коде все тэги <p>, имеющие родителя <div> - братья. Также братьями являются <body> и <head>, так как они имеют одного общего родителя <html>.

Давайте рассмотрим немного видоизмененный код, для более четкого понимания данной темы.
predki3.JPG
Как мы видим – появился тэг <span>. Давайте перечислим всех его родственников. Итак, его родителем является тэг <p>, в котором он находится. Братьев у него нет. Его предками являются тэги <div>, <body> и <html>. Заметьте, что остальные тэги <p>, а также <head> и <title> не имеют к нему никакого отношения в плане родственности. Это важно понимать при составлении таблицы стилей.
Ну что? Голова заболела?))) Это, конечно, довольно сложная тема, но если Вы ее будете хорошо понимать, то у Вас не возникнет проблем с созданием сайта, например, когда Вы редактируете шаблон, который создавал другой человек. Обязательно потренируйтесь с описанием родственных отношений между тэгами. Возьмите любую страницу в интернете, посмотрите ее исходный кот и попробуйте описать всех родственников для тэгов, которые находятся в самой "глубине" кода.
В следующем материале мы рассмотрим непосредственно комбинации селекторов в Css.

Комментарии: