【CSS(style)の適応順序】どれが優先されるかについて、CodePenで実際にかいてまとめてみた

CSSの適応順序は、詳細度の概念に基づいて決まっています。

>**詳細度の概念**
>詳細度は、どのプロパティ値が最もある要素に関係があり、適用されるかをブラウザが決定する手段です。詳細度は異なる順のセレクタで構成されるマッチング規則にのみ基づきます。
>参照元：[詳細度 - CSS | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/Specificity "詳細度 - CSS | MDN")

折角なので、自分の勉強も兼ねて
CodePenで実際に書いてみながらまとめてみました。
「HTML」や「CSS」をポチポチ押しながら、記載内容をご確認下さい。

#一般的な適応順序

##CSS内での記載順の関係
CSS内に同じ要素名・クラス名等の記述があった場合は、一番最後に記述されたstyleが適応される
<p data-height="300" data-theme-id="0" data-slug-hash="OvzEve" data-default-tab="css,result" data-user="kako3" data-embed-version="2" data-pen-title="CSS適応順序資料_同一CSS内での記載順の関係" class="codepen">See the Pen <a href="https://codepen.io/kako3/pen/OvzEve/">CSS適応順序資料_同一CSS内での記載順の関係</a> by kako3 (<a href="https://codepen.io/kako3">@kako3</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


##要素名とクラス名の関係
CSS内に要素名とクラス名の記載があった場合は、
クラス名が適応される
<p data-height="300" data-theme-id="0" data-slug-hash="EEoLYB" data-default-tab="css,result" data-user="kako3" data-embed-version="2" data-pen-title="CSS適応順序資料_同一CSS内でのクラス名と要素名の関係" class="codepen">See the Pen <a href="https://codepen.io/kako3/pen/EEoLYB/">CSS適応順序資料_同一CSS内でのクラス名と要素名の関係</a> by kako3 (<a href="https://codepen.io/kako3">@kako3</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


##クラス名とid名の関係
CSS内にid名とクラス名の記載があった場合は、
id名のstyleが適応される
<p data-height="300" data-theme-id="0" data-slug-hash="rdpzqV" data-default-tab="css,result" data-user="kako3" data-embed-version="2" data-pen-title="CSS適応順序資料_classとidの関係" class="codepen">See the Pen <a href="https://codepen.io/kako3/pen/rdpzqV/">CSS適応順序資料_classとidの関係</a> by kako3 (<a href="https://codepen.io/kako3">@kako3</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


##HTMLのstyle要素とCSS内での記載の関係
HTMLの”style”要素とCSS内に同じ要素名・クラス名の記載があった場合は、
HTMLの”style”要素に記載されたstyleが適応される
<p data-height="300" data-theme-id="0" data-slug-hash="xWpXEL" data-default-tab="html,result" data-user="kako3" data-embed-version="2" data-pen-title="CSS適応順序資料_HTMLのstyle要素とCSS内での記載順の関係" class="codepen">See the Pen <a href="https://codepen.io/kako3/pen/xWpXEL/">CSS適応順序資料_HTMLのstyle要素とCSS内での記載順の関係</a> by kako3 (<a href="https://codepen.io/kako3">@kako3</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


##インラインスタイルと外部CSS等の関係
HTMLの”style”要素やCSS内に同じ要素名・クラス名の記載とかが色々あったとしても、
HTMLの要素に対してstyleを直書きして付与した（インラインスタイル）がものが最優先で適応される。
<p data-height="300" data-theme-id="0" data-slug-hash="aYjQmd" data-default-tab="html,result" data-user="kako3" data-embed-version="2" data-pen-title="CSS適応順序資料_HTMLの要素に対してスタイルを直書きして付与した（インラインスタイル）と他のCSSとの関係" class="codepen">See the Pen <a href="https://codepen.io/kako3/pen/aYjQmd/">CSS適応順序資料_HTMLの要素に対してスタイルを直書きして付与した（インラインスタイル）と他のCSSとの関係</a> by kako3 (<a href="https://codepen.io/kako3">@kako3</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


##インラインスタイルと外部CSS等の関係(js編)
HTMLの”style”要素やCSS内に同じ要素名・クラス名の記載とかが色々あったとしても、
HTMLの要素に対してstyleを直書きして付与した（インラインスタイル）がものがあったとしても、
jsで要素に直接付与したスタイルが最優先で適応される。
<p data-height="300" data-theme-id="0" data-slug-hash="mxjQBX" data-default-tab="html,result" data-user="kako3" data-embed-version="2" data-pen-title="CSS適応順序資料_HTMLの要素に対してスタイルを直書きして付与した（インラインスタイル）と他のCSSとの関係_js編" class="codepen">See the Pen <a href="https://codepen.io/kako3/pen/mxjQBX/">CSS適応順序資料_HTMLの要素に対してスタイルを直書きして付与した（インラインスタイル）と他のCSSとの関係_js編</a> by kako3 (<a href="https://codepen.io/kako3">@kako3</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>



#例外が混ざってる場合の適応順序
ここからは、全ての優先順位のルールを覆す”!important ”の破壊力をお楽しみください。

##CSS内での記載順と!importantの関係
CSS内に同じ要素名・クラス名の記載があったとしても、
”!important ”を記載すると、記載したものが最優先で適応される
<p data-height="300" data-theme-id="0" data-slug-hash="aYEGKN" data-default-tab="css,result" data-user="kako3" data-embed-version="2" data-pen-title="CSS適応順序資料_同一CSS内での記載順と!importantの関係" class="codepen">See the Pen <a href="https://codepen.io/kako3/pen/aYEGKN/">CSS適応順序資料_同一CSS内での記載順と!importantの関係</a> by kako3 (<a href="https://codepen.io/kako3">@kako3</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


##HTMLのstyle要素とCSS内での記載と!importantの関係
HTMLの”style”要素とCSS内に同じ要素名・クラス名の記載があった際も、
CSS内に”!important ”を記載すると、記載したものが最優先で適応される
<p data-height="300" data-theme-id="0" data-slug-hash="PREegB" data-default-tab="html,result" data-user="kako3" data-embed-version="2" data-pen-title="CSS適応順序資料_HTMLのstyle要素とCSS内での記載と!importantの関係" class="codepen">See the Pen <a href="https://codepen.io/kako3/pen/PREegB/">CSS適応順序資料_HTMLのstyle要素とCSS内での記載と!importantの関係</a> by kako3 (<a href="https://codepen.io/kako3">@kako3</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


##インラインスタイルと!importantの関係
HTMLの要素に対してスタイルを直書きして付与した（インラインスタイル）としても、
CSS内の!importantの記載の方が適応される
<p data-height="300" data-theme-id="0" data-slug-hash="VXydpx" data-default-tab="html,result" data-user="kako3" data-embed-version="2" data-pen-title="CSS適応順序資料_!importantとインラインスタイルの関係" class="codepen">See the Pen <a href="https://codepen.io/kako3/pen/VXydpx/">CSS適応順序資料_!importantとインラインスタイルの関係</a> by kako3 (<a href="https://codepen.io/kako3">@kako3</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


##インラインスタイルと!importantの関係(js編)
HTMLの要素に対してスタイルを直書きして付与した（インラインスタイル）としても、
jsでそれを上書き下としても、
CSS内の!importantの記載があったら、そっちの方が最優先で適応される。
<p data-height="300" data-theme-id="0" data-slug-hash="XEBorp" data-default-tab="html,result" data-user="kako3" data-embed-version="2" data-pen-title="CSS適応順序資料_!importantとインラインスタイルの関係(js編)" class="codepen">See the Pen <a href="https://codepen.io/kako3/pen/XEBorp/">CSS適応順序資料_!importantとインラインスタイルの関係(js編)</a> by kako3 (<a href="https://codepen.io/kako3">@kako3</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
「jsの記載はあってるのに反映されてない・・・」なんてこともありますよね。。。
そんな時は、ひとまず”!important ”がどこかで悪さをしてないか確認することも大切かと思います。


##!importantの記載順の関係
CSS内に同じ要素名・クラス名の記載があり、
!importantが複数ついてしまった場合は、
一番最後に記載された!importantのついてるものが適応される
<p data-height="300" data-theme-id="0" data-slug-hash="aYELOJ" data-default-tab="css,result" data-user="kako3" data-embed-version="2" data-pen-title="CSS適応順序資料_!importantの記載順の関係" class="codepen">See the Pen <a href="https://codepen.io/kako3/pen/aYELOJ/">CSS適応順序資料_!importantの記載順の関係</a> by kako3 (<a href="https://codepen.io/kako3">@kako3</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

”!important ”地獄にハマったら、
とにかく上書きに上書きを繰り返して対応するという
涙ぐましい労力がかかるので、辛いですよね。。。


---

2018/04/04 追記：
インラインスタイルと!importantの関係(js編)　追記しました。
また、公開済みのCodePen側の記載も一部修正を加えています。

---

※更新の時間ができ次第、順次追加予定※
※おかしなところがあったら、ご指摘頂けると嬉しいです※