В прошлом уроке мы разобрались с тем, что такое css селекторы, какие они бывают и как их использовать. В этом уроке мы продолжим рассматривать селекторы, и поговорим о наследуемых селекторах.

  • Что такое наследуемые селекторы
  • Дерево HTML (принцип наследования)
  • Создание селекторов потомков

Для вас, если вы не знакомы с принципом наследования в каком либо языке программирования, эта тема возможно покажется сложной и запутанной. Но в процессе работы, все станет понятным и прозрачным.

Что такое наследуемые селекторы

Какой тип селектора выбрать, зависит от конкретного случая и потребностей. Селекторы типов можно создать очень быстро, но они придают одинаковый внешний вид всем экземплярам стилизируемого объекта. Это может понадобится, если вам нужно что бы все заголовки второго уровня выглядели одинаково.

Классовые и id селекторы обеспечивают большую гибкость независимой стилизации отдельно взятых элементов страницы.

Однако создавать всякий раз новые css стили для каждого элемента страницы, не очень удобно и практично. Постоянно создавать стиль для изменения одного элемента, отнимает много времени для создания стиля и добавления его в html код.

Все, что нужно в этом случае, объединить простоту селекторов типов и точность селекторов классов и идентификаторов.

Для этих целей используют наследуемые селекторы. Если в теории, они используются для одинакового форматирования набора тегов в определенном контексте – фрагменте веб страницы.

Работает это примерно так: “Отредактировать все ссылки в правом навигационном блоке, но так, что бы ссылки в левом и верхнем блоке не трогать“.

Для понимания принципа наследования css, и правильного его применения, нужно понять принцип наследования html.

Дерево HTML (принцип наследования)

Код html похож на генеалогическое дерево. Первый тег <html> является прародителем всех остальных тегов. Из него выходят <head> и <body>, и <html> является их прародителем или предком.

Тег который расположенный внутри другого тега (предка) является потомком. Так <head> и <body> являются потомками тега <html>.

Рассмотрим такой пример:

Это структура html документа. Посмотрите в виде схемы:

Древовидная структура html

На этой схеме показано как CSS “видит” взаимодействие элементов веб страницы. На примере этой схема, мы разберем родственные отношения:

  • Предок – это html элемент, который заключает в себе другой html элемент или элементы. Тег <html> является предком для всех остальных тегов. В то время как тег <body> является предком для тегов: <h1>, <p>, <strong>.
  • Потомок – элемент, который находится внутри одного или группы тегов. <body> это потомок для <html>, в то время как <p> это потомок и для <body> и для <html>.
  • Родительский элемент – это элемент который находится выше на дереве. В нашем случае <body> родительский элемент для <p> и <h1>, в то же время <p> родительский элемент для <strong>
  • Дочерний элемент – элемент который стоит непосредственно под другим элементом и подчиняется ему. <p> является дочерним по отношению к <html>, <title> является дочерним по отношению к <head>.
  • Сестринский элемент – это элементы которые являются дочерними для одного и того же тега. В нашем случае теги <p> и <h1> являются дочерними по отношению к <body> а между собой они имеют сестринские отношения.

Вот и все родственные отношения которые используются в css.

Создание селекторов потомков

Селекторы потомков позволяют форматировать теги по разному, в зависимости от того, где эти теги находятся. К примеру рассмотрим такой случай, нам нужно выделить часть заголовка <h1> тегом <strong>. И у нас есть тег <strong> в абзаце.

Визуально разница между словами в заголовке будет не очень отличаться, так как заголовок обычно тоже жирный. И нам нужно сделать так, что бы слова внутри тега <strong> в заголовке <h1> были выделены красным цветом. Но при этом слова в тегах <stong> внутри абзаца <p> оставались черными.

Если мы определим селектор типов

Тогда все что в тегах <strong> будет выделено красным цветом. И в заголовках и в абзацах.

В таких и похожих случаях используют селекторы потомков.

Выглядит это следующим образом:

Эта запись говорит: “Любой тег <strong> который находится внутри тега <h1> нужно покрасить в красный цвет”.

При этом теги <strong> в абзацах не будут затронуты.

Можно было бы создать класс, .redcolor и применить его к конкретному тегу <strong>, но это создает дополнительные строчки кода в html файле. Это можно сделать гораздо проще и практичнее с помощью наследуемых селекторов.

Наследуемые селекторы работают по тем же правилам, что и теги-предки и теги-потомки в дереве html.

При создании селектор потомков, мы помещаем самый старший предок слева, а форматируемый тег справа.

Пример, наш код html:

Все теги в этом коде, потомки тега предка <html>. Теперь отформатируем все ссылки <a> которые находятся внутри списка <li>.

Вот как это делается с помощью селектора потомков:

Все вышеперечисленные варианты селекторов потомков будут работать корректно и применять форматирование к ссылкам внутри тегов <li> (только внутри списков). Если у нас будет ссылка внутри тега <p> то эти форматирования к этим спискам не будут применены.

Это подтверждаем отсутствие необходимости описывать всех предков тега, который вам нужно отформатировать.

Также селекторы потомков не ограничено только типовыми селекторами, вы можете комбинировать их в классами и id.

И это еще по теме селекторов. В следующем уроке мы поговорим о псевдоклассах и псевдоелементах.

Наследуемые селекторы CSS Владимир Полковниченко Основы CSS,
В прошлом уроке мы разобрались с тем, что такое css селекторы, какие они бывают и как их использовать. В этом уроке мы продолжим рассматривать селекторы, и поговорим о наследуемых селекторах. Что такое наследуемые селекторы Дерево HTML (принцип наследования) Создание селекторов потомков Для вас, если вы не знакомы с принципом наследования в каком либо...
В прошлом уроке мы разобрались с тем, что такое <a title="CSS селекторы" href="/css/obuchenie-css/osnovy-css/css-selektory.html" target="_blank">css селекторы</a>, какие они бывают и как их использовать. В этом уроке мы продолжим рассматривать селекторы, и поговорим о наследуемых селекторах. <ul> <li>Что такое наследуемые селекторы</li> <li>Дерево HTML (принцип наследования)</li> <li>Создание селекторов потомков</li> </ul> Для вас, если вы не знакомы с принципом наследования в каком либо языке программирования, эта тема возможно покажется сложной и запутанной. Но в процессе работы, все станет понятным и прозрачным. <h2>Что такое наследуемые селекторы</h2> Какой тип селектора выбрать, зависит от конкретного случая и потребностей. <a title="Селекторы типов" href="/css/obuchenie-css/osnovy-css/css-selektory.html" target="_blank">Селекторы типов</a> можно создать очень быстро, но они придают одинаковый внешний вид всем экземплярам стилизируемого объекта. Это может понадобится, если вам нужно что бы все заголовки второго уровня выглядели одинаково. <a title="Классовые и id селекторы" href="/css/obuchenie-css/osnovy-css/css-selektory.html" target="_blank">Классовые и id селекторы</a> обеспечивают большую гибкость независимой стилизации отдельно взятых элементов страницы. Однако создавать всякий раз новые <a title="css стили" href="/css/obuchenie-css/osnovy-css/chto-takoe-css-stili-pravila-i-kak-ix-sozdavat.html" target="_blank">css стили</a> для каждого элемента страницы, не очень удобно и практично. Постоянно создавать стиль для изменения одного элемента, отнимает много времени для создания стиля и добавления его в html код. Все, что нужно в этом случае, объединить простоту селекторов типов и точность селекторов классов и идентификаторов. Для этих целей используют <strong>наследуемые селекторы</strong>. Если в теории, они используются для одинакового форматирования набора тегов в определенном контексте - фрагменте веб страницы. Работает это примерно так: "<em>Отредактировать все ссылки в правом навигационном блоке, но так, что бы ссылки в левом и верхнем блоке не трогать</em>". Для понимания принципа наследования css, и правильного его применения, нужно понять принцип наследования html. <h3>Дерево HTML (принцип наследования)</h3> Код html похож на генеалогическое дерево. Первый тег <html> является прародителем всех остальных тегов. Из него выходят <head> и <body>, и <html> является их прародителем или предком. Тег который расположенный внутри другого тега (предка) является потомком. Так <head> и <body> являются потомками тега <html>. Рассмотрим такой пример: [crayon-56611e8a114b7462364926/] Это структура html документа. Посмотрите в виде схемы: <img class=" size-full wp-image-197 aligncenter" src="/wp-content/uploads/2015/03/struktura_html.png" alt="Древовидная структура html" width="247" height="198" /> На этой схеме показано как CSS "видит" взаимодействие элементов веб страницы. На примере этой схема, мы разберем родственные отношения: <ul> <li><strong>Предок</strong> - это html элемент, который заключает в себе другой html элемент или элементы. Тег <html> является предком для всех остальных тегов. В то время как тег <body> является предком для тегов: <h1>, <p>, <strong>.</li> <li><strong>Потомок</strong> - элемент, который находится внутри одного или группы тегов. <body> это потомок для <html>, в то время как <p> это потомок и для <body> и для <html>.</li> <li><strong>Родительский элемент</strong> - это элемент который находится выше на дереве. В нашем случае <body> родительский элемент для <p> и <h1>, в то же время <p> родительский элемент для <strong></li> <li><strong>Дочерний элемент</strong> - элемент который стоит непосредственно под другим элементом и подчиняется ему. <p> является дочерним по отношению к <html>, <title> является дочерним по отношению к <head>.</li> <li><strong>Сестринский элемент</strong> - это элементы которые являются дочерними для одного и того же тега. В нашем случае теги <p> и <h1> являются дочерними по отношению к <body> а между собой они имеют сестринские отношения.</li> </ul> Вот и все родственные отношения которые используются в css. <h3>Создание селекторов потомков</h3> Селекторы потомков позволяют форматировать теги по разному, в зависимости от того, где эти теги находятся. К примеру рассмотрим такой случай, нам нужно выделить часть заголовка <h1> тегом <strong>. И у нас есть тег <strong> в абзаце. [crayon-56611e8a114c7429748785/] Визуально разница между словами в заголовке будет не очень отличаться, так как заголовок обычно тоже жирный. И нам нужно сделать так, что бы слова внутри тега <strong> в заголовке <h1> были выделены красным цветом. Но при этом слова в тегах <stong> внутри абзаца <p> оставались черными. Если мы определим селектор типов [crayon-56611e8a114cf806062556/] Тогда все что в тегах <strong> будет выделено красным цветом. И в заголовках и в абзацах. В таких и похожих случаях используют селекторы потомков. Выглядит это следующим образом: [crayon-56611e8a114d5150299295/] Эта запись говорит: "Любой тег <strong> который находится внутри тега <h1> нужно покрасить в красный цвет". При этом теги <strong> в абзацах не будут затронуты. Можно было бы создать класс, .redcolor и применить его к конкретному тегу <strong>, но это создает дополнительные строчки кода в html файле. Это можно сделать гораздо проще и практичнее с помощью наследуемых селекторов. Наследуемые селекторы работают по тем же правилам, что и теги-предки и теги-потомки в дереве html. При создании селектор потомков, мы помещаем самый старший предок слева, а форматируемый тег справа. Пример, наш код html: [crayon-56611e8a114dc749170113/] Все теги в этом коде, потомки тега предка <html>. Теперь отформатируем все ссылки <a> которые находятся внутри списка <li>. Вот как это делается с помощью селектора потомков: [crayon-56611e8a114e3287634808/] Все вышеперечисленные варианты селекторов потомков будут работать корректно и применять форматирование к ссылкам внутри тегов <li> (только внутри списков). Если у нас будет ссылка внутри тега <p> то эти форматирования к этим спискам не будут применены. Это подтверждаем отсутствие необходимости описывать всех предков тега, который вам нужно отформатировать. Также селекторы потомков не ограничено только типовыми селекторами, вы можете комбинировать их в классами и id. [crayon-56611e8a114ea968392186/] И это еще по теме селекторов. В следующем уроке мы поговорим о <a title="Псевдоклассы и псевдоэлементы в CSS" href="/css/obuchenie-css/osnovy-css/psevdoklassy-i-psevdoelementy-v-css.html" target="_blank">псевдоклассах и псевдоелементах</a>.