Як успадкувати колір посилання у CSS за допомогою color: inherit

Привіт:) У цій замітці покажу, яким чином успадковується колір для тегу <a>, як працює значення inherit та чому цей простий CSS-прийом може зробити код чистішим і гнучкішим.

Особливо корисним такий підхід стає у картках, списках, меню, футері, тематичних секціях та інших компонентах, де посилання повинні автоматично відповідати кольору тексту батьківського елемента.

Коли ми працюємо з посиланнями всередині списків або карток, часто виникає потреба змінити їхній колір відповідно до батьківського контейнера.

Наприклад:

<ul>
  <li class="link">
    <a href="#">Текст посилання</a>
  </li>
</ul>

Можна окремо задати колір для <a>:

.link a {
  color: red;
}

Але в багатьох випадках це зовсім не обов'язково. CSS вже має механізм успадкування властивостей, який дозволяє передати колір від батьківського елемента до дочірнього.

Саме тут у пригоді стає:

color: inherit;

Традиційний підхід та його недоліки

Зазвичай розробники використовують селектор за тегом, щоб змінити колір посилання:

.link a {
  color: red;
}

Хоча цей код працює, він має кілька мінусів.

1. Складність підтримки

У реальному проєкті таких місць може бути багато:

.header a {
  color: white;
}

.footer a {
  color: white;
}

.sidebar a {
  color: #333;
}

.card a {
  color: #222;
}

Якщо дизайн змінюється, доводиться шукати та редагувати декілька правил.

За допомогою успадкування можна зменшити кількість таких залежностей:

a {
  color: inherit;
}

Після цього колір посилання визначається контекстом, у якому воно знаходиться.

2. Залежність від структури HTML

Селектор:

.card a {
  color: red;
}

безпосередньо пов'язує стилі з HTML-структурою.

Якщо розмітка компонента зміниться, CSS-селектор також може перестати працювати так, як очікувалося.

Натомість:

.card {
  color: red;
}

.card a {
  color: inherit;
}

описує логіку більш декларативно:

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

3. Селектори за тегом

У сучасних CSS-підходах часто намагаються мінімізувати залежність компонентів від HTML-тегів.

Наприклад, у методології BEM перевага зазвичай надається класам:

.card__link {
  ...
}

замість:

.card a {
  ...
}

Це робить стилі більш передбачуваними та полегшує їхнє перевизначення.

Як CSS визначає колір посилання

Щоб зрозуміти inherit, важливо розібратися з тим, як браузер визначає значення color.

Властивість color належить до властивостей CSS, які успадковуються.

Наприклад:

<div class="parent">
  <p>
    Звичайний текст
    <a href="#">Посилання</a>
  </p>
</div>

Якщо ми напишемо:

.parent {
  color: green;
}

то текст усередині .parent за замовчуванням успадкує зелений колір.

Те саме стосується <p> та <a>, якщо для них не задано інше значення color.

Однак для посилань є важливий нюанс: браузерні стилі користувацького агента можуть задавати власний колір для <a>.

Наприклад, традиційно посилання відображаються синім:

a {
  color: blue;
}

Тому явне:

a {
  color: inherit;
}

дозволяє сказати браузеру:

не використовуй окремий колір для посилання — візьми значення color його батьківського елемента.

Елегантне рішення: властивість inherit

Замість того, щоб вказувати колір безпосередньо для кожного посилання, ми можемо змусити всі теги <a> на сайті "слухатися" свого батьківського елемента.

Для цього використовується значення inherit — успадкування.

a {
  color: inherit;
}

Тепер колір <a> буде дорівнювати обчисленому значенню color батьківського елемента.

Наприклад:

.card {
  color: #222;
}

<div class="card">
  <a href="#">Назва картки</a>
</div>

Посилання буде мати той самий колір, що й текст .card.

Якщо змінити:

.card {
  color: #fff;
}

посилання автоматично стане білим.

Крок 1: Глобальне налаштування

Додайте цей код у ваш базовий файл стилів:

a {
  color: inherit;
  text-decoration: none;
}

text-decoration: none тут не є обов'язковим.

Якщо ви хочете зберегти стандартне підкреслення посилань, достатньо:

a {
  color: inherit;
}

Це важливе розділення відповідальності: color відповідає за колір, а text-decoration — за декоративне оформлення тексту.

Крок 2: Керування кольором через батька

Тепер вам достатньо змінити колір лише у батьківського класу:

.link {
  color: red;
}

Тепер:

<div class="link">
  <a href="#">Текст посилання</a>
</div>

посилання автоматично успадкує червоний колір.

При цьому не потрібно писати:

.link a {
  color: red;
}

Тобто колір задається на рівні компонента, а посилання просто використовує його.

Чому це зручно? Приклади

Тематичні блоки

Уявіть, що у вас є світлий та темний блоки.

Замість того, щоб писати окремі стилі для посилань:

.dark-section a {
  color: white;
}

.light-section a {
  color: black;
}

можна зробити так:

.dark-section {
  color: white;
}

.light-section {
  color: black;
}

А глобальне правило:

a {
  color: inherit;
}

зробить свою роботу автоматично.

HTML:

<section class="dark-section">
  <h2>Темна секція</h2>
  <p>
    Текст та
    <a href="#">посилання</a>
  </p>
</section>

<section class="light-section">
  <h2>Світла секція</h2>
  <p>
    Текст та
    <a href="#">посилання</a>
  </p>
</section>

Це особливо зручно для компонентних інтерфейсів, де один і той самий компонент може використовуватися на різному фоні.

Ховер-ефекти

Використання inherit дозволяє створювати лаконічні ефекти при наведенні.

Наприклад:

.card {
  color: #666;
  transition: color 0.3s;
}

.card:hover {
  color: blue;
}

Якщо всередині .card знаходиться посилання:

<div class="card">
  <a href="#">Назва матеріалу</a>
</div>

то при наведенні на картку колір посилання також зміниться.

Це відбувається завдяки:

a {
  color: inherit;
}

Ще один варіант — змінювати колір саме при наведенні на посилання:

a:hover {
  color: blue;
}

Тобто inherit не забороняє використовувати :hover. Він лише визначає базове значення кольору.

inherit, initial, unset та revert

CSS має кілька глобальних значень, які легко переплутати.

inherit

Примусово успадковує значення від батьківського елемента:

a {
  color: inherit;
}

Для нашого випадку це саме те, що потрібно.

initial

Встановлює початкове значення властивості відповідно до CSS-специфікації:

a {
  color: initial;
}

Це не означає "взяти колір батька".

unset

Працює залежно від того, чи успадковується властивість. Для успадкованої властивості фактично поводиться як inherit, а для неуспадкованої — як initial.

a {
  color: unset;
}

Для color результатом буде успадкування.

revert

Повертає властивість до значення, яке вона мала б отримати з іншого рівня каскаду.

Це особливо корисно для скасування власного CSS-правила та повернення до браузерних або інших стилів:

a {
  color: revert;
}

Наприклад, revert може бути корисним, якщо ви хочете повернути стандартне оформлення посилання, яке браузер застосовує без вашого стилю.

inherit та currentColor: у чому різниця

Ще одне значення, яке часто зустрічається поруч із inherit, — currentColor.

Вони вирішують схожі, але не однакові задачі.

inherit означає:

успадкуй значення цієї властивості від батька.

currentColor означає:

використовуй поточне значення властивості color цього самого елемента.

Наприклад:

.card {
  color: #333;
}

.card__icon {
  color: inherit;
  border-color: currentColor;
}

Тут .card__icon успадковує колір від .card, а border-color використовує поточний колір самого .card__icon.

Це дуже зручно для SVG, іконок, рамок та декоративних елементів:

.icon {
  color: inherit;
  fill: currentColor;
}

Таким чином іконка автоматично отримує той самий колір, що й текст.

Коли color: inherit може бути недоречним

Хоча inherit дуже зручний, не варто сприймати його як універсальне правило для абсолютно всіх посилань.

Наприклад, на інформаційному сайті посилання в основному тексті часто повинні мати візуально відмінний колір:

.article a {
  color: #005fcc;
}

Це допомагає користувачу швидко відрізнити посилання від звичайного тексту.

Якщо написати:

a {
  color: inherit;
}

а додаткового оформлення не зробити, посилання може стати практично невідрізнимим від звичайного тексту.

Тому варто розділяти два сценарії:

Посилання є частиною компонента і має виглядати як текст компонента:

a {
  color: inherit;
}

Посилання має бути візуально видимим як посилання:

.article a {
  color: #005fcc;
  text-decoration: underline;
}

Як організувати стилі посилань у сучасному CSS

Хорошим рішенням може бути базове правило для посилань та окремі модифікатори для компонентів.

Наприклад:

a {
  color: inherit;
}

.article__link {
  color: #005fcc;
  text-decoration: underline;
}

.card__link {
  color: inherit;
  text-decoration: none;
}

У результаті кожен компонент сам визначає, чи потрібно йому використовувати стандартну поведінку успадкування.

Ще краще — не перевантажувати глобальний селектор <a> зайвими правилами.

Наприклад, замість великого reset:

a {
  color: inherit;
  text-decoration: none;
  transition: all 0.3s;
  font-weight: 600;
  cursor: pointer;
}

краще розділити базову поведінку та компонентні стилі.

Це дозволяє уникнути ситуації, коли глобальне правило несподівано змінює вигляд посилань у сторонньому компоненті або плагіні.

Доступність та стани посилань

При роботі з color: inherit не варто забувати про доступність.

Якщо посилання має той самий колір, що й звичайний текст, користувач може не зрозуміти, що перед ним інтерактивний елемент.

Особливо це важливо для посилань усередині тексту.

Тому можна використовувати підкреслення:

.article a {
  color: inherit;
  text-decoration: underline;
}

Або додати помітний стан при наведенні:

.article a:hover {
  text-decoration: none;
}

Не варто покладатися тільки на зміну кольору при :hover. Користувачі сенсорних пристроїв взагалі не мають звичайного стану наведення.

Також варто стилізувати :focus-visible, щоб користувачі клавіатури бачили, який елемент зараз активний:

a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

Практичний приклад компонента

Розглянемо картку статті:

<article class="card">
  <h2 class="card__title">
    <a href="#">Як працює CSS inheritance</a>
  </h2>

  <p class="card__description">
    Короткий опис матеріалу.
  </p>
</article>

CSS:

.card {
  color: #222;
  transition: color 0.3s ease;
}

.card a {
  color: inherit;
  text-decoration: none;
}

.card:hover {
  color: #005fcc;
}

Тепер колір заголовка, посилання та інших текстових елементів може керуватися через .card.

Але є ще цікавіший варіант:

.card {
  color: #222;
}

.card__link {
  color: inherit;
  text-decoration: none;
}

.card:hover {
  color: #005fcc;
}

Тут ми вже не прив'язуємося до HTML-тега <a> і використовуємо клас компонента.

Це добре відповідає компонентному підходу та BEM.

Типові помилки

Помилка 1: задавати один і той самий колір у декількох місцях

.card {
  color: #333;
}

.card a {
  color: #333;
}

Якщо посилання має бути такого самого кольору, друге правило зайве.

Краще:

.card {
  color: #333;
}

.card a {
  color: inherit;
}

Помилка 2: використовувати ! important

Наприклад:

a {
  color: inherit ! important;
}

Це може тимчасово вирішити проблему зі специфічністю, але створює нову проблему — тепер перевизначити колір посилання стає складніше.

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

Помилка 3: прибирати підкреслення всюди

Ось так:

a {
  color: inherit;
  text-decoration: none;
}

може бути зручно для кнопок, карток та навігації.

Але для посилань у великому тексті це може погіршити зрозумілість інтерфейсу.

Тому text-decoration: none не варто автоматично вважати обов'язковою частиною color: inherit.

Помилка 4: забувати про :visited

Якщо ви використовуєте власні стилі посилань, браузерні правила для відвіданих посилань також можуть впливати на результат.

За потреби можна явно визначити:

a,
a:visited {
  color: inherit;
}

Однак використовувати :visited потрібно обережно та лише тоді, коли це дійсно потрібно для конкретного дизайну.

Чи потрібно використовувати color: inherit глобально?

Однозначної відповіді немає.

Варіант:

a {
  color: inherit;
}

добре підходить для проєктів, де посилання часто є частиною компонентів:

• карток;
• меню;
• кнопок-посилань;
• списків;
• заголовків;
• футера;
• тематичних блоків.

Але для контентних сайтів, блогів та документації часто краще мати виразне оформлення посилань у тексті:

.article a {
  color: #005fcc;
  text-decoration: underline;
}

Тобто правильніше думати не в категорії "завжди використовуйте inherit", а:

використовуйте inherit, коли посилання повинно візуально наслідувати текст свого компонента.

Ще один корисний прийом: CSS-змінні

Якщо дизайн використовує багато кольорових тем, разом із inherit можна використовувати CSS custom properties.

Наприклад:

.card {
  --card-color: #222;
  color: var(--card-color);
}

.card a {
  color: inherit;
}

Для іншої теми:

.card--dark {
  --card-color: white;
}

Тепер компонент сам визначає свій колір, а посилання автоматично його наслідує.

Це особливо корисно для дизайн-систем та багаторазових UI-компонентів.

Висновок

Використання:

a {
  color: inherit;
}

— це простий спосіб змусити посилання наслідувати колір свого батьківського елемента.

Замість десятків правил:

.header a { ... }
.footer a { ... }
.sidebar a { ... }
.card a { ... }

можна керувати кольором на рівні самого компонента:

.card {
  color: #333;
}

А <a> просто отримає це значення через:

a {
  color: inherit;
}

Такий підхід добре працює там, де посилання повинні бути невід'ємною частиною компонента: у картках, навігації, тематичних секціях, списках та інших UI-елементах.

Водночас для посилань у звичайному тексті не варто бездумно прибирати їхню візуальну відмінність. У таких випадках власний колір, підкреслення та чіткі :hover і :focus-visible стани часто є кращим рішенням.

Головне — розуміти різницю між успадкуванням, каскадом та стилями конкретного компонента. Тоді inherit стає не просто коротким CSS-значенням, а інструментом для побудови чистої та передбачуваної системи стилів.

Важливо: браузери мають власні стилі для посилань, тому <a> за замовчуванням часто відображається синім та підкресленим. Якщо дизайн передбачає, що посилання повинні відповідати кольору батьківського елемента, color: inherit дозволяє явно визначити цю поведінку. Але оформлення посилань завжди варто оцінювати разом із вимогами до доступності та зручності користування.

FAQ з успадкування кольору посилання у CSS