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

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

Кратко

Секция статьи "Кратко"

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

Пример

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

        
        
          
        
      

Как это понять

Секция статьи "Как это понять"

Для некоторых HTML-тегов предопределены особые CSS-свойства по умолчанию (их ещё называют user agent-стили — т. е. стили от браузера), которые характерны только для конкретно этих элементов, например, margin: 8px для <body>, color: #00c для ссылок или font-weight: bolder для <b>. Их можно переопределить, но некоторые свойства (цвета текста, размера шрифта, внешнего вида курсора и другие) будут применяться для любых вложенных элементов, пока для них не будет указано иного значения. Такая наследуемость не случайна и обусловлена одним очень интересным CSS-значением у этих свойств — inherit, что буквально и значит «наследуемое».

Если у какого-то свойства указать значение 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>
  <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;}
          img {
  border: inherit;
}

        
        
          
        
      
Открыть демо в новой вкладке

Подсказки

Секция статьи "Подсказки"

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

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

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

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

На практике

Секция статьи "На практике"

Realetive

Секция статьи "Realetive"

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

        
          
          <button class="magick-btn">Волшебная кнопка</button>
          <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;
}

        
        
          
        
      
Открыть демо в новой вкладке