Css наследование своих классов

Основы CSS. Часть 2. Комбинации селекторов, наследование, каскадирование и специфичность

В прошлой статье мы разобрали что такое CSS, как подключать стили к HTML страницам, поговорили о синтаксисе CSS-правил, и познакомились с многообразием CSS-селекторов.

В этой статье разберем немного более сложные вещи.

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

Заголовок статьи 1

Заголовок статьи 2

Заголовок новости 1

Заголовок новости 2

Для заголовков и статей, и новостей, используются теги . Мы можем отформатировать эти заголовки, используя селектор элемента, например:

Cтоит задача, что заголовки статей должны быть по центру, а заголовки новостей надо сделать темно-красного цвета.

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

Но тогда нам придется эти классы указать в разметке для каждого тега как в статьях, так и в новостях, да и в целом количество классов увеличится. Однако известный философский принцип «Не следует множить сущности без необходимости» актуален везде, в том числе и программировании.

Мы можем поступить красивее, а именно использовать комбинации селекторов.

Комбинации селекторов.

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

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

Здесь мы использовали комбинатор пробел . Т.е. селектор . articles h3 выберет для изменений теги < h3 >, которые находятся внутри элемента с классом articles (вне зависимости от уровня вложенности).

Этот комбинатор называется «комбинатор потомков» и используется очень часто.

Дочерний селектор

Давайте немного изменим верстку блока со статьями.

Заголовок статьи 1

Заголовок статьи 2

Рекламная акция

Заголовок статьи 3

Заголовок статьи 4

У нас, среди статей, появился рекламный блок, и в нем также используется заголовок < h3 >.

Использованный нами ранее селектор . articles h3 подействует и на заголовок рекламной акции, поскольку он не учитывает уровень вложенности.

Если мы хотим изменить только заголовки статей, не трогая рекламный заголовок, то лучше использовать «дочерний селектор» — символ > .

Селектор . articles > h3 выберет для изменения теги h3, которые находятся непосредственно в элементе с классом articles , а теги рекламных заголовков затронуты не будут.

Комбинатор всех соседних элементов

Комбинатор ~ выберет все соседние элементы, т.е. элементы у которых такой же контейнер, как и у указанного элемента. Слово «соседний» в данном случае обозначает, что будут выбраны все элементы находящиеся после указанного.

Заголовок статьи 1

Заголовок статьи 2

Рекламная акция

Заголовок статьи 3

Заголовок статьи 4

В примере выше все заголовки , которые находятся после заголовка с классом . first — article , станут синего цвета. Заголовок, находящийся внутри с классом . promo затронут не будет, поскольку у него другой контейнер.

Комбинатор следующего соседнего элемента

Комбинатор + позволяет выбрать элемент, который находится сразу после указанного элемента. При этом, конечно, у них должен быть общий контейнер.

В примере выше, написано правило, которое обеспечивает, что любой (один) элемент, который находятся сразу после заголовка с классом . first — article , будет иметь отступ сверху размером 3rem .

Комбинатор запятая

Комбинатор, позволяет сгруппировать селекторы, т.е. задать несколько селекторов для одного правила.

В примере выше, мы обнуляем отступы снизу сразу у всех заголовков.

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

Для сокращения количества правил в CSS имеется механизм наследования.

Наследование – это механизм, когда определенные в контейнере свойства, автоматически назначаются вложенным в этот контейнер элементам.

Для примера, рассмотрим правило:

В примере выше, мы устанавливаем синий цвет текст для тега < body >. При этом все остальные элементы, находящиеся внутри этого тега, независимо от уровня вложенности, унаследуют синий цвет текста.

Описанное выше поведение очень удобно, иначе вам бы пришлось, для всех элементов, прописывать цвет текста вручную.

Наследуются далеко не все свойства. Свойства, относящиеся к тексту, наследуются – это такие свойства, как: color , font , letter — spacing , line — height , list — style , text — align , text — indent , text — transform , visibility , white — space и word — spacing и некоторые другие.

А вот свойства, которые отвечают за форматирование блоков не наследуются: background , border , display , float и clear , height , width , margin , overflow , padding , position , text — decoration , vertical — align , z — index и другие.

В самом деле, представьте если бы наследовалась, скажем, граница – верстка бы сильно усложнилась.

В спецификации css имеется ключевое слово inherit . С его помощью можно принудительно наследовать любое свойство от родительского блока (как наследуемое, так и не наследуемое).

В этом примере параграфы, находящиеся внутри блока с классом . sidebar будут наследовать значение свойства overflow от своего контейнера.

Каскадность и специфичность

Напомню, что CSS в переводе – это «Каскадные таблицы стилей», уже одно это показывает важность понятия «каскадность».

В верстке самой распространенной является ситуация, когда на один элемент действуют множество CSS-правил. И то, как именно будет выглядеть элемент определяют именно каскадность и специфичность.

Каскадность

Каскадность – это механизм CSS, который определяет какие стили в итоге будут применены к элементу.

Заголовок третьего уровня

Видим, что для данного элемента имеются 3 правила. Итоговыми стилями, примененными к элементу, будут:

С каскадностью теснейшим образом связана специфичность.

Дело в том, что одни и те же свойства, для одного и того же элемента, могут быть определены в разных css-правилах, и даже, в разных файлах.

Какое же значение у свойства будет в итоге? Это определяется через механизм, называемый специфичность.

Специфичность

Заголовок новости

В примере цвет текста для тега < h3 >, находящегося в контейнере с классом . sidebar , прописан 2 раза.

Вопрос: «Какой цвет будет у этого элемента?»

Ответ: «Красный, поскольку селектор . sidebar h3 более специфичен, еще говорят: селектор имеет больший вес».

Специфичность (вес) селектора определяется при помощи 4-х различных значений. Эти значения можно, условно, представить как цифры: тысячи, сотни, десятки, единицы.

• Тысяча – это встроенные стили, добавляемые непосредственно в сам элемент в HTML-разметке.
• Сотня – это идентификатор.
• Десятки – это классы.
• Единицы – это сам элемент или псевдоэлемент.

Если не очень понятно, то посмотрите таблицу ниже и все станет ясно:

Селектор	Тысячи	Сотни	Десятки	Единицы	Специфичность
div	0	0	0	1	0001
.some-class	0	0	1	0	0010
#myid	0	1	0	0	0100
текст	1	0	0	0	1000
.some-class div	0	0	1	1	0011
#myid .some-class div	0	1	1	1	0111
.some-class ul li	0	0	1	2	0012
.some-class .my-class p span	0	0	2	2	0022

В ситуации, если специфичность у селекторов одинакова, действовать будет правило, которое находится ниже в css-файле.

Если правила находятся в разных css-файлах, то действовать будет правило, которое расположено в файле, подключенном позднее (ниже).

Модификатор !important

Если для объявления задан модификатор ! important , то такое объявление будет иметь приоритет над всеми остальными объявлениями для данного элемента.

Модификатор ! important пишется в конце объявления, после значения перед точкой с запятой.

Источник

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

Некоторые 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; >    Скопировать Скопировано Не удалось скопировать   

Источник

Наследование классов в CSS — class, id, !importent

Разберём, как наследуются значения стилей для классов.

В CSS существует последовательность применения стилей для классов.

Например у нас есть следующая структура:

Стили у elements например будут одни, где присутствует одинаковый белый фон.

1. Применение дополнительного класса для перезаписи стиля определённого блока

Если мы добавим например к последнему блоку дополнительный стиль element-two :

И стиль для класса element-two добавим другой цвет фона, например красный. У такого блока с дополнительным классом перезапишутся стили, поменяется фон блока на красный:

А другие стили, которые не будут изменены и добавлены к дополнительному классу, будут наследоваться от класса element

2. Добавление id для перезаписи стиля дополнительного класса element-two

При добавлении id к блоку в HTML и написании стиля для класса element-two с добавлением #block , те стили которые применялись ранее только для дополнительного стиля element-two перезапишутся за счёт айдишника:

2. Добавление !important к значению перезапишет стиль, делая его важным.

Important — переводится как важный и применив данное дополнение к значению, сделает значение ещё более приоритетным:

Но применение !important не является хорошим тоном в среде веб-разработчиков, означает, что при написании кода, что-то было упущено, где-то был просчёт в иерархии при определении классов.

Данный метод не является ошибкой, просто не так круто выглядит в глазах опытных программистов!)

Источник