CSSで装飾をしていると、なぜが反映されないことってありますよね？！それって、CSSには上書きのルールがあるからなんです。

最初に指定した設定は、後から指定した設定、もしくは、より詳細なセレクターのプロパティーの値を継承するという事です。

このような一連の動作を「カスケード(cascade)」といい、滝のように段階的に読み取っていくというような意味になります。

1ページで終わるようなwebサイトだったり、簡単なものも場合は、然程気にすることはないのですが、何ページにもなる物などの場合だと、色々と問題になってくるので、理解しておいたほうが良いです。

一番影響力の弱いCSSは、デフォルト値のプロパティーになり、その次が製作者が決めた値で、もっとも強いのが、「!important」です。ただ、「!important」は極力使わないことをお勧めします。言ってみれば裏技のようなもので、CSSのルールを無視しつけることになるので、もし、制作に当たって上手く反映されてないと思ったら、何が反映されているか確認をして直しましょう。慣れるまでは大変ですが、結果的にCSSを書く上で軽いファイルを作れたり、使い回しが効いたり、修正しやすいサイト作成に繋がっていきます。

セレクターにはどんな種類があるか見ていきましょう！

全ての要素に反映させるセレクターを「ユニバーサルセレクター（全域セレクター）」と言い、「*」の記号で表します。次に「タイプセレクター」で、要素そのものに装飾していきます。例えば、h1,h2,pなどです。

そして、「idセレクター」と「classセレクター」があり、それぞれ表し方を「#idにつけた名前」、「.classにつけた名前」でCSSファイルに書きます。

次に挙げる4つは少しややこしいですが、なるべくわかりやすく説明できるように頑張ります。

1つ目が「子セレクター」で、親要素の直下の子要素に対して装飾します。書き方が「li>a{~}」

2つ目が子セレクターに似ている「子孫セレクター」で、親要素から下にある要素に対してです。書き方を「li a{~}」で表します。

例を挙げてみてみましょう！！

上記の様に書いた場合、一見同じように見えますが、結果はどのようになるのでしょう！？

「子セレクター」の表記の場合は、HTMLの二行目の「span」が入っている「li」以外が全て赤い文字になります。

「子孫セレクター」の表記の場合は、HTMLの二行目の「span」が入っている「li」も含めて全てが赤い文字になります。

この様に「>」が付くか付かないかで意味が変わります。

次に３つ目と４つ目のセレクターの種類を見ていきましょう。

3つ目が「隣接兄弟セレクター（adjacent sibling selector）」で、同じ並びの要素の次に出てきた要素に装飾します。「h1+p」のように表します。

「一般兄弟セレクター（general sibling selector）」で同じ並びの要素で次に出てきた要素全てを装飾します。「h1~p」のように表します。

上記で見てみると、「隣接兄弟セレクター」は、「h1」の次にある「p」要素のみに適用されます。そして、「一般兄弟セレクター」は、「h1」以降にある「p」要素全てにかかります。「h2」の後にある「p」要素にもかかります。ただ、「<div>」タグの下の階層にある「p」には反映されていません。3個目と4個目はh1と同じ階層にあるpタグに反映するという意味なので階層の違うpタグには反映されないのです。

優先順位をしっかりとやっていても、反映しない時があったりしたという経験あると思います。そういったときに詳細度が関わって来たりしてる事があります。詳細度とは名前の通り、自分がCSSで装飾したい要素を指定するときにどれだけ詳しくセレクターを書くかです。大げさに言えば、

上記のように書いたとして、詳細度を無視して反映出来るとしたとして、上書きのルールから、後に書いた方が反映されるので、#FFEE00（黄色）になるはずです。しかし、詳細度を含めて考えると上の方が詳細に書いてあるので、実際は下の表記は反映されません。

全てをまとめると、デフォルト値　<　タイプセレクター（子、子孫セレクター）< class属性　<　id属性　<　インラインの順番になります。

注意として、詳細度を上げてどれもこれも書いていくと、ページ数が少なかったりすれば問題なかったりしますが、ページ数が増えていくと予期しないところで反映しなかったりし、あとで探したりするのが面倒になるので、なるべく詳細度は高くせずかけることを心がけてやっていくことをお勧めします。