freeCodeCamp/curriculum/challenges/ukrainian/01-responsive-web-design/basic-css/override-all-other-styles-by-using-important.md

id, title, challengeType, videoUrl, forumTopicId, dashedName

id	title	challengeType	videoUrl	forumTopicId	dashedName
bad87fee1348bd9aedf07756	Заміна всіх інших стилів за допомогою Important	0	https://scrimba.com/c/cm24rcp	18249	override-all-other-styles-by-using-important

--description--

Ура! Ми щойно довели, що вбудовані стилі заміняють усі об'яви в елементі style.

Але зачекайте. Є ще один, останній спосіб замінити CSS. Це - найпотужніший зі всіх методів. Але перш ніж ми це зробимо, давайте поговоримо про те, чому вам коли-небудь треба буде замінити CSS.

У багатьох ситуаціях ви будете використовувати бібліотеки CSS. Вони можуть випадково замінити ваш власний CSS. Тому, коли вам потрібно бути цілком упевненим, що елемент повинен мати певний CSS, ви можете використати !important.

Давайте повернемося до нашої об'яви класу pink-text. Пам'ятайте, що клас pink-text був замінений наступними об'явами класів, об'явами id та вбудованими стилями.

--instructions--

Давайте додамо ключове слово !important в об'яву кольору елемента pink-text, аби впевнитися на 100%, що елемент h1 буде рожевим.

Ось приклад того, як це зробити:

color: red !important;

--hints--

Елемент h1 повинен мати клас pink-text.

assert($('h1').hasClass('pink-text'));

Елемент h1 повинен мати клас blue-text.

assert($('h1').hasClass('blue-text'));

Елемент h1 повинен мати id з orange-text.

assert($('h1').attr('id') === 'orange-text');

Елемент h1 повинен мати вбудований стиль color: white.

assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\s*?:/gi));

Об'ява класу pink-text повинна мати ключове слово !important, щоб замінити усі інші об'яви.

assert(
  code.match(/\.pink-text\s*?\{[\s\S]*?color:.*pink.*!important\s*;?[^\.]*\}/g)
);

Елемент h1 має бути рожевим.

assert($('h1').css('color') === 'rgb(255, 192, 203)');

--seed--

--seed-contents--

<style>
  body {
    background-color: black;
    font-family: monospace;
    color: green;
  }
  #orange-text {
    color: orange;
  }
  .pink-text {
    color: pink;
  }
  .blue-text {
    color: blue;
  }
</style>
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>

--solutions--

<style>
  body {
    background-color: black;
    font-family: monospace;
    color: green;
  }
  #orange-text {
    color: orange;
  }
  .pink-text {
    color: pink !important;
  }
  .blue-text {
    color: blue;
  }
</style>
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>