CSS inherit — успадкувати значення від батька
Ключове слово, яке повідомляє, що необхідно наслідувати значення властивості у батьківського елементу. Звісно, результат буде помітний лише в тому випадку, якщо у батька вказана властивість встановлена.
h1 намагається успадкувати значення кольору, яке він знаходить у елементі body.
Кожна CSS властивість може приймати, як значення, ключове слово inherit. Наприклад, ось так:
span {
font-size: inherit;
}
Цим ми змушуємо певний елемент успадковувати вказане значення властивості від батьківського елемента. Якщо в CSS не інстальовано властивість для батьківського елемента, то він успадкує значення, обчислене від батька (яке може бути дефолтним або яким-небудь іншим, успадкованим від батьківського елемента).
Ключове слово inherit може стати в нагоді, якщо ви хочете привласнити одне і те ж значення групі дочірніх елементів для властивостей, які зазвичай не успадковуються. наприклад:
.block {
box-shadow: 0px 0px 11px rgba(0, 0, 0, 0.4);
}
.block div {
box-shadow: inherit;
}
Тепер всі елементи <div> всередині основного елемента .block успадковують його значення властивості box-shadow.
Загальний опис
автор: NagarD
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 4 | 12 | 8 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
inherit явно бере значення у батька: абзац стає бордовим шрифтом Georgia, бо це стилі контейнера. Для color успадкування і так типове, але inherit незамінний там, де його типово немає (рамки, відступи).
HTML
<div class="frame">
<p class="block">Абзац успадкував колір і шрифт від контейнера.</p>
</div>
<p>Звичайний абзац поза контейнером.</p>CSS
.frame {
color: #d81b60;
font-family: Georgia, serif;
}
.block {
color: inherit;
font-family: inherit;
}Угорі — те, по що сюди приходять: посилання в кольоровому блоці без color: inherit і з ним. Унизу — властивість, яка не успадковується сама: внутрішній блок із border-color: inherit бере рамку батька, а сусідній без цього рядка малює її кольором власного тексту.
HTML
<div class="note">
<p>Типово: <a href="#">браузер фарбує посилання у свій синій</a> — воно випадає з тексту.</p>
<p class="own"><code>a { color: inherit }</code>: <a href="#">колір той самий, що й у тексту</a>.</p>
</div>
<div class="card">
<p>Рамка картки — зелена, колір тексту картки теж зелений.</p>
<div class="inner">border-color: inherit — рамка взяла колір рамки БАТЬКА</div>
<div class="plain">border-color не задано — рамка кольору ВЛАСНОГО тексту</div>
</div>CSS
body {
font-family: system-ui, sans-serif;
font-size: 16px;
}
.note {
color: #8e2436;
background: #fdf2f4;
padding: 12px 16px;
margin-bottom: 20px;
}
/* єдина відмінність другого абзацу */
.note .own a {
color: inherit;
}
.card {
color: #0a7d5a;
border: 3px solid #0a7d5a;
padding: 12px 16px;
}
.card .inner,
.card .plain {
color: #333;
border: 3px solid; /* колір не заданий → currentColor */
padding: 8px 10px;
margin-top: 10px;
}
.card .inner {
border-color: inherit;
}Демонстація роботи значення.
HTML
<div>
<p>Цей блок наслідує значення властивостей від батьківського елементу.</p></div>CSS
body{
font-size: 19px;
}
div {
border: 5px solid red;
padding: 10px;
}
p {
border: inherit;
padding: inherit;
}Коментарі
Коментарів ще немає — будьте першим!