Селекторы потомков

Наследование

Некоторые CSS-свойства применяются не только к самому элементу, но и к его детям.

Время чтения: меньше 5 мин

Кратко

Скопировать ссылку «Кратко» Скопировано

Наследование в CSS — это способность элементов-потомков перенимать правила форматирования (свойства CSS), которые присвоены их предкам.

Пример

Скопировать ссылку «Пример» Скопировано

   Весь текст в этом абзаце будет красным.  p style="color: red"> Весь span>текстspan> в em>этомem> абзаце будет b>краснымb>. p>    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку «Как понять» Скопировано

Если у какого-то свойства указать значение inherit — оно будет взято у верхнего «родителя». Для некоторых CSS-свойств это значение указано по умолчанию.

Наследуемые свойства

Скопировать ссылку «Наследуемые свойства» Скопировано

• Свойства шрифта: font и его «производных»: font — style , font — variant , font — weight , font — stretch , font — size и font — family ; color и line — height .
• Свойства межбуквенных и «межсловных» расстояний: letter — spacing , word — spacing и white — space .
• Параметры текста: text — align , text — indent , text — shadow , text — transform ;
• оформление пунктов списков: list — style , list — style — type , list — style — position .
• Внешний вид курсора: cursor и отображение содержимого элемента visibility .

Например, в отличие от color , который применится к подписи, ненаследуемое свойство border не будет применено к вложенным элементам:

      figure> img src="doggo-up.svg"> figcaption>Дока Догfigcaption> figure>    Скопировать Скопировано Не удалось скопировать   

 figure  border: 3px solid #18191c; color: blue;> figure  border: 3px solid #18191c; color: blue; >    Скопировать Скопировано Не удалось скопировать   

 img  border: inherit;> img  border: inherit; >    Скопировать Скопировано Не удалось скопировать   

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 Другой пример наследования — использование вместо указания цвета значения current Color , который равен цвету текста текущего элемента, т. е. значению свойства color . Если color текущего элемента равен inherit (т. е. наследует значение «родителя»), то и current Color также будет соответствовать текущему значению color «родителя». Причём это ключевое слово можно указывать в качестве значения для любого свойства, где значением является цвет, не только для color . См. раздел «На практике».

Значения rem и em — также частный случай наследования кратного размера текста («родителя», если указан em и корневого тега в случае с rem ).

Полный список наследуемых по умолчанию CSS-свойств помечен в спецификации в колонке «Inherited?» значением yes .

Значение любого CSS-свойства можно «позаимствовать» (унаследовать) у родителя. Если «родителя» нет, inherit будет соответствовать значению по умолчанию для этого элемента.

На практике

Скопировать ссылку «На практике» Скопировано

Realetive советует

Скопировать ссылку «Realetive советует» Скопировано

🛠 Удобно делать всякие трюки, используя current Color . Мы не меняем явно цвет рамки по наведению курсора, но он меняется вслед за color .

 Волшебная кнопка button class="magick-btn">Волшебная кнопкаbutton>    Скопировать Скопировано Не удалось скопировать   

 .magick-btn  border: 2px solid; border-color: currentColor; border-radius: 6px; padding: 9px 15px; color: blue; background-color: transparent;> .magick-btn:hover  color: pink;> .magick-btn  border: 2px solid; border-color: currentColor; border-radius: 6px; padding: 9px 15px; color: blue; background-color: transparent; > .magick-btn:hover  color: pink; >    Скопировать Скопировано Не удалось скопировать   

Источник

Наследование (inherit initial unset) | CSS

Свойство, меняющее все стили CSS, кроме direction и unicode-bidi

Это те значения, которые можно применить к любому свойству CSS. Везде происходит сброс стиля браузера, в том числе у тегов input , progress и т.д.

CSS наследование стилей от родителя: inherit

Если предку и потомку нужно указать одинаковые значения свойства, то удобней для дальнейшего редактирования использовать inherit — достаточно будет изменить значение только у родителя.

inherit передаёт не конечное значение, а то, что указано в стилях родителя

Пример 1: в чём разница между width: inherit; и width: 100%;

width: 50%; border: solid mediumaquamarine;"> 
width: 100%; background: #E6E2FF;">100%
 

width: 50%; border: solid mediumaquamarine;"> 
width: inherit; background: #E6E2FF;">inherit
 

Пример 2: max-height: 100%; не работает

max-height: 3em; border: solid mediumaquamarine;"> 
max-height: 100%; height: 4em; background: #E6E2FF;">100%
 

max-height: 3em; border: solid mediumaquamarine;"> 
max-height: inherit; height: 4em; background: #E6E2FF;">inherit
 

Пример 3: как сделать дубликат стилей CSS родителя

  
У меня та же максимальная ширина, фон, рамка и другое, что у родителя
 

inherit переносит значение непосредственного родителя, а не определённого position

width: 100%; border: solid salmon; position: relative;"> 
width: 50%; border: solid mediumaquamarine;"> 
width: 100%; background: #E6E2FF; position: absolute;">100%
 
 

width: 100%; border: solid salmon; position: relative;"> 
width: 50%; border: solid mediumaquamarine;"> 
width: inherit; background: #E6E2FF; position: absolute;">inherit
 
 

Копируется всё, даже то, что не указано разработчиком в стилях у родителя

 
без установленного display 

 
display: inherit; background: #E6E2FF;">inherit 

initial CSS: отменить наследование

Для того, чтобы узнать начальные значения свойств, которые зависят от браузера, таких как color и font-family , можно применить initial

Пример 1: запретить наследование свойства

  
color: initial;
 

Пример 2: убрать свойство для более узкого селектора

 .raz < color: red; /* наследуется */ font-size: 200%; /* наследуется */ > .raz0 .raz 
Я сам по себе
 
У меня есть родитель "raz0"
 

initial позволяет сбросить все стили, включая те, что браузер задал для тега по умолчанию

Пример: для сторонних виджетов отключить наследование стиля и стили, установленные браузером

  
<div> 
не будет блочным
 

unset CSS: сбросить стиль браузера

Поведение стандартное, только все теги становятся обезличенными, словно их подстригли под одну гребёнку. То есть как и у initial , блочные элементы станут inline .

Пример: обнулить все возможные стили input

 label < text-shadow: 1px 1px rgba(255,0,180,0.5); >input Изменить текст: 

Домашнее задание: в комментариях предложить свой пример использования значений inherit, initial и unset, а то у меня фантазия уже исчерпана 🙂

5 комментариев:

Анонимный Здравствуйте!
Не подскажите почему так?
https://jsfiddle.net/og96q6x5/

Почему этот негодяй Н2 сдвигает жёлтый ДИВ в низ. Я вообще хотел без красного. Он жёлтый сдвинул. Я его ещё в один ДИВ так он сдвинул и жёлтый и красный.
Почему?
NMitra Здравствуйте, насколько я поняла вас не устраивает схлопывание? Посмотрите http://shpargalkablog.ru/2011/03/svoistva-margin-padding.html#m-parent Там есть решения проблемы Анонимный Спасибо Вам. Эту пробелку я уже нарыл как решать это схлопывание. Или как у Вас или чистящим ДИВом.

Не у меня другое.
Вот получилось. Что и хотел.
Вроде получилось его усмирить с display:inline-block.
https://jsfiddle.net/og96q6x5/2/

Но вопрос остался. Разве находясь внутри ДИВа он не должен двигаться по этому диву. Никого не трогать?
И почему при display:inline margiņ-top: Не работает?
https://jsfiddle.net/og96q6x5/1/
Анонимный Спасибо Нашёл.
vertical-align: с display:inline; и display:inline-block;

Даа. Как всё это забавно.
NMitra И почему при display:inline margiņ-top не работает? — Потому что он не блочный, у него нет высоты height

Источник

Селекторы потомков CSS

Селекторы потомков CSS предназначены для применения стилей ко всем потомкам указанного элемента. Эти селекторы являются составными, то есть складываются из простых селекторов (классы, идентификаторы, селекторы тегов и т.д.), которые мы с вами изучали в прошлых уроках.

Как вы знаете из учебника по HTML, элемент является потомком для другого элемента (предка), когда он находится внутри него на любом уровне вложенности. Если подзабыли, то давайте еще раз повторим, рассмотрев такой пример:

В этом примере все элементы являются потомками элемента , но вместе с этим еще и потомок элемента .

Теперь о синтаксисе. Селекторы потомков могут состоять из двух и более селекторов разделенных пробелами, где сначала записывается предок, потом его потомок, далее можно дополнительно указать потомка этого потомка и так далее. Другими словами, указывается путь, по которому необходимо пройти в дереве документа. При этом стили применятся к элементу или элементам, селекторы которых находятся в конце данного списка. Общий синтаксис:

Пример использования селекторов потомков в CSS

       
внутри DIV1.
 
внутри DIV1.
 
 
внутри DIV2.
 
внутри DIV2.
 
 
 

С помощью селекторов потомков очень удобно изменять стили элементов, когда у сайта уже есть много страниц и не хочется вносить изменения в существующий HTML-код. Поэтому рекомендую вам еще на этапе создания макета страниц присвоить основным блокам уникальный id , например id= «header» для шапки сайта, id= «footer» для нижней части и так далее. Тогда, даже если у вас в разных участках будут попадаться одинаковые элементы (например, с одним и тем же классом) — вы во многих случаях сможете изменить какой-либо из них, всего лишь подправив один файл с таблицей стилей.

В принципе, вместо id конечно можно использовать и класс (тут главное следить, чтобы его имя не встречалось на странице два раза) но идентификаторы все-таки больше дисциплинируют в этом плане.

Селекторы потомков и универсальный селектор

То, что мы с вами уже изучили о селекторах потомков очень полезно и одновременно просто, не правда ли? Но многие верстальщики, причем не только новички, но и профессионалы, подчас забывают об их очень полезном сочетании с универсальным селектором, позволяющем иногда серьезно сократить объем CSS-кода. Особенно, если надо изменить стили у нескольких элементов находящихся на одном уровне вложенности.

Пример совместного использования селекторов потомков и универсального селектора в CSS

        
Параграф1.
 
Параграф2. Span.
 
Параграф3. Strong.
 
  

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

1. Создайте трехколоночный макет с шапкой и футером (без использования таблиц).
2. Вставьте в шапку страницы логотип сайта в виде ссылки-изображения.
3. Создайте в левой и правой колонке по меню на основе списков. Пусть в левом меню половина ссылок будет черного цвета и половина — красного, а в правом меню — половина черного и половина — синего.
4. Сделайте в футере страницы горизонтальное меню на основе списка, а не просто ссылок в блоке. Используйте для этого свойство display. Да, и пусть это меню располагается по центру страницы.
5. Напишите в центральной части страницы несколько параграфов, а между ними укажите ссылку-изображение и разместите ее по центру.
6. Уберите поля по краям страницы, рамки у ссылок-изображений и маркеры у списков.

• Введение
• Что такое CSS?
• Синтаксис CSS
• Подключение CSS
• Типы устройств
• Базовый синтаксис
• Значения и единицы измерения CSS
• Комментарии в CSS
• Селекторы CSS
• Селекторы тегов
• Селекторы атрибутов
• Универсальный селектор
• Классы
• Идентификаторы
• Селекторы потомков
• Дочерние селекторы
• Соседние селекторы
• Псевдоклассы
• Псевдоэлементы
• Обработка CSS
• Наследование
• Приоритеты стилей

Copyright © 2010-2015 seodon.ru Все права защищены.

С условиями использования материалов данного сайта вы можете ознакомиться на странице автора.

Источник