Урок 50 із 239
21%
← Назад

Наслідування CSS властивостей

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

Наслідування CSS властивостей

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

Розглянемо приклад. У нас є абзац, всередині якого знаходиться текст у тегу i:

<p>
  This is some <i>text</i> in paragraph.
</p>
p {
  color: red;
}

У результаті червоним кольором стане не тільки текст абзацу, а й текст усередині тега i. Це відбувається тому, що властивість color наслідується.

❗ Важливо:

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

Перевизначення успадкованих властивостей

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

<p>
  This is some <i>text</i> in paragraph.
</p>
p {
  color: red;
}

i {
  color: blue;
}

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

Порядок розташування селекторів у CSS не має значення, якщо вони мають однакову специфічність.

i {
  color: blue;
}

p {
  color: red;
}

Результат буде таким самим: текст абзацу червоний, а текст у тегу i синій.

Практичні завдання

📌 Завдання:
  1. №1
  3. Який колір матиме текст у тегу b?
  5. <p>
  6. This is some <b>text</b> in paragraph.
  7. </p>
  9. p {
  10. color: blue;
  11. }
✅ Показати відповідь
Текст у тегу b буде синього кольору. Властивість color успадкується від батьківського елемента p.
📌 Завдання:
  1. №2
  3. Який колір матиме текст у тегу b?
  5. <p>
  6. This is some <b>text</b> in paragraph.
  7. </p>
  9. p {
  10. color: blue;
  11. }
  13. b {
  14. color: red;
  15. }
✅ Показати відповідь
Текст у тегу b буде червоним, тому що для b задано власну властивість color, яка перевизначає успадковане значення.
📌 Завдання:
  1. №3
  3. Який колір матиме текст у тегу b?
  5. b {
  6. color: red;
  7. }
  9. p {
  10. color: blue;
  11. }
✅ Показати відповідь
Текст у тегу b буде червоним. Власний стиль b має пріоритет над успадкованим стилем від p.
📌 Завдання:
  1. №4
  3. Який колір матиме текст у тегу li?
  5. ul {
  6. color: blue;
  7. }
✅ Показати відповідь
Текст у тегах li буде синім, оскільки li успадковує властивість color від ul.
📌 Завдання:
  1. №5
  3. Який колір матиме текст у тегу li?
  5. ul {
  6. color: blue;
  7. }
  9. li {
  10. color: red;
  11. }
✅ Показати відповідь
Текст у li буде червоним, тому що власний стиль li замінює успадкований стиль від ul.
📌 Завдання:
  1. №6
  3. Який колір матиме текст у тегу i?
  5. ul {
  6. color: blue;
  7. }
  9. li {
  10. color: red;
  11. }
  13. i {
  14. color: green;
  15. }
✅ Показати відповідь
Текст у тегу i буде зеленим, тому що для нього задано власний колір.
📌 Завдання:
  1. №7
  3. Який розмір матиме текст у тегу i?
  5. i {
  6. font-size: 30px;
  7. }
  9. ul {
  10. font-size: 20px;
  11. }
  13. li {
  14. color: red;
  15. font-weight: bold;
  16. }
✅ Показати відповідь
Текст у тегу i буде мати розмір 30px, тому що для нього задано власну властивість font-size. Значення 20px від ul не використовується.