/ ↲
    Расширенный поиск

    CSS

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

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

    Время чтения: меньше 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-свойств это значение указано по умолчанию.

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

    Скопировано

    Например, в отличие от 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 советует

    Скопировано

    🛠 Удобно делать всякие трюки, используя 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;
}
    Открыть демо в новой вкладке

    Читайте также