freeCodeCamp/curriculum/challenges/japanese/01-responsive-web-design/basic-css/override-class-declarations-by-styling-id-attributes.md

id, title, challengeType, videoUrl, forumTopicId, dashedName

id	title	challengeType	videoUrl	forumTopicId	dashedName
bad87fee1348bd8aedf06756	クラス宣言を ID 属性のスタイルでオーバーライドする	0	https://scrimba.com/c/cRkpDhB	18251	override-class-declarations-by-styling-id-attributes

--description--

私たちは、ブラウザが CSS を上から下へ宣言の順に読み込むことを証明しました。 つまり、競合が発生した場合、ブラウザは後に来た CSS 宣言を使用します。 h1 要素のクラス属性で blue-text を pink-text の前に置いたとしても、使われた順番ではなく宣言の順番が見られることに注目してください。

これで終わりではありません。 CSS をオーバーライドする方法は他にもあります。 id 属性を覚えていますか？

h1 要素に id を追加してその id を使ってスタイルを変更することで、pink-text と blue-text のクラスをオーバーライドして h1 要素をオレンジにしてみましょう。

--instructions--

h1 要素に orange-text という id 属性を追加してください。 id スタイルは以下のようになります:

<h1 id="orange-text">

h1 要素の blue-text と pink-text のクラスはそのままにしてください。

style 要素内に id orange-text 用の CSS 宣言を作成します。 こちらの例と似たような書き方になるでしょう:

#brown-text {
  color: brown;
}

注: この CSS の宣言は pink-text クラスの上下どちらにあっても差し支えありません。 id 属性は常に優先されるためです。

--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 要素は 1 つだけ必要です。

assert($('h1').length === 1);

orange-text の id には CSS 宣言が必要です。

assert(code.match(/#orange-text\s*{/gi));

h1 には style 属性を設定してはいけません。

assert(!code.match(/<h1.*style.*>/gi));

h1 要素がオレンジで表示されている必要があります。

assert($('h1').css('color') === 'rgb(255, 165, 0)');

--seed--

--seed-contents--

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

--solutions--

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