05. Селекторы потомков.
B CSS есть понятия "предок" и "потомок", а также селекторы, основанные на принципе наследственности.
Для браузера наша HTML страница представляется в виде дерева, и корнем этого дерева является тэг <html>. Все остальные тэги находятся внутри тэга <html>.
Непосредственно внутри тэга <html> находятся тэги <head> (контейнер для служебных тэгов) и <body> (контейнер для тэгов с контентом для пользователя).
Можно сказать, что теги внутри пары <body> и </body> являются потомками для тега <body>. Это, например, теги <div> и другие. Внутри тега <div> тоже могут находится некторые теги и эти теги будут являться потомками для <div>. А для тега <body> потом являться потомками не только вложенные теги <div> первого уровня, но и все прочие теги более глубоких вложений.
Указанный выше тег <body> будет являться родителем (предком) для вложенных тегов первого уровня (например, для тега <div>). А сам тег <div> будет родителем для тегов, которые вложены в него на первом уровне и т.д.
Например, если мы хотим раскрасить в красный цвет (цвет #CC0000) все элементы <li> ненумерованного списка <ul>, то хорошим способом будет создание следующего правила:
т.е. создаем правило по следующему синтаксису: родитель[пробел]потомок.
Попробуем теперь выполнить такое задание: окрасить в желтый цвет (цвет #FAA21A) все ссылки, т.е. элементы <a>, которые являются "дочками" по отношению к элементам <figure>:
Под это правило попадает ссылка внизу страницы для перехода на ее верх. Она и окрасилась в желтый цвет.
Более сложный пример, уже с тремя уровнями вложенностями:
Тут логика такая. Имеется некий уникальный элемент с идентификатором bt: <div id="bt">. У него есть "дочки", параграфы <p>. А уже внутри этих параграфов есть ссылки, т.е. элементы <a>. Эти элементы и надо раскрасить в желтый (золотистый) цвет.
Посмотрим теперь наш тестовый пример.
css_005_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_005_001.zip ← скачайте пример, чтобы установить на свой сайт...
Обратите внимание, что по правилу 1 раскрашиваются в красный цвет только дочерние элементы <li> относительно своих родителей ненумерованных списков <ul>. Если бы мы создали правило просто для li, то тогда в красный цвет раскрасились бы все элементы li, независимо от их родителей.
И ссылки окрашиваются в желтый цвет не все подряд, а только те, которые являются "дочками" по отношению к элементам <figure>.
В виде самостоятельного домашнего задания подумайте и проведите эксперимент:
Если мы наше самое сложное правило данного урока:
#bt p a {
облегчим следующим образом:
#bt a {
то как оно будет работать, при условии, что на самой страничке css_005_001.html мы никаких изменений не делаем?
Для браузера наша HTML страница представляется в виде дерева, и корнем этого дерева является тэг <html>. Все остальные тэги находятся внутри тэга <html>.
Непосредственно внутри тэга <html> находятся тэги <head> (контейнер для служебных тэгов) и <body> (контейнер для тэгов с контентом для пользователя).
Можно сказать, что теги внутри пары <body> и </body> являются потомками для тега <body>. Это, например, теги <div> и другие. Внутри тега <div> тоже могут находится некторые теги и эти теги будут являться потомками для <div>. А для тега <body> потом являться потомками не только вложенные теги <div> первого уровня, но и все прочие теги более глубоких вложений.
Указанный выше тег <body> будет являться родителем (предком) для вложенных тегов первого уровня (например, для тега <div>). А сам тег <div> будет родителем для тегов, которые вложены в него на первом уровне и т.д.
Например, если мы хотим раскрасить в красный цвет (цвет #CC0000) все элементы <li> ненумерованного списка <ul>, то хорошим способом будет создание следующего правила:
ul li {
color: #CC0000;
}
Попробуем теперь выполнить такое задание: окрасить в желтый цвет (цвет #FAA21A) все ссылки, т.е. элементы <a>, которые являются "дочками" по отношению к элементам <figure>:
figure a {
color: #FAA21A;
}
Более сложный пример, уже с тремя уровнями вложенностями:
#bt p a {
color: #FAA21A;
}
Посмотрим теперь наш тестовый пример.
css_005_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_005_001.zip ← скачайте пример, чтобы установить на свой сайт...
Обратите внимание, что по правилу 1 раскрашиваются в красный цвет только дочерние элементы <li> относительно своих родителей ненумерованных списков <ul>. Если бы мы создали правило просто для li, то тогда в красный цвет раскрасились бы все элементы li, независимо от их родителей.
И ссылки окрашиваются в желтый цвет не все подряд, а только те, которые являются "дочками" по отношению к элементам <figure>.
В виде самостоятельного домашнего задания подумайте и проведите эксперимент:
Если мы наше самое сложное правило данного урока:
#bt p a {
облегчим следующим образом:
#bt a {
то как оно будет работать, при условии, что на самой страничке css_005_001.html мы никаких изменений не делаем?
***** Машина-Функционал для передвижения по страничкам курса CSS *****
Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
