CSSの優先順位を把握しておくとWebページを作りやすくなる。

Webページとかブログとかをいじっていると、この場所ちゃんとCSSで指定したのに反映されてないんだけど…。みたいなことがときどき起こります。

その原因が、優先順位が低くて、別の要素のやつが反映されちゃってたってことがあります。

いじっていると、二重に同じ要素を指定することが結構あったりなかったり。

そうすると、優先順位が高いほうが選ばれるので自分が思ったのと違って混乱することが。

特に別の人が作ったCSSをいじろうとすると、めんどくさいことが結構あります。

CSSはセレクタのおさらい。

CSSでは、ある場所のレイアウトやデザインをカスタムしたいときにセレクタで指定します。

• 要素型セレクタ：”p”とか”h1”とか”a”とかのタグを買いて
  
• classセレクタ：HTMLの方で、<h1 class=“sample”>、CSSの方で”.sample”みたいに使う
  
• idセレクタ：HTMLで、<h2 id=“test”>、CSSで”#test”みたいに使う
  

などなど

他にもいろいろありますが、基本はコレです。

あとは”style”を使ってHTMLに直接書き込むパターンもあります。

styleは要素への直書きのことで、

<div style=“color:#red;”>

みたいなふうにかきます。

優先順位はstyle ＞ id(#) ＞ class(.) > タイプセレクタ（タグ）

それぞれに数字が振ってあります。

• style=1000
  
• id=100
  
• class=10
  
• 要素タグ=1
  

1の位から1000の位の数字になっています。

この数字が大きければ優先順位は高くなるのです。

例えば、

1. .first .second = 20
   
2. #test1 .second = 110
   
3. #test1 #test2 .second = 210
   

この3つだったら3番目が優先的に反映されます。

あとほかにも、全称セレクタ（*）、擬似要素（:first-child）、擬似クラス（[type="text"]）

しっかりとしたWebサイトをつくらない限り、あまり使わないかと。

最終奥義は、!important

どうも優先順位がわからない。ここは完全にこれを反映させたい。ってときには、「!important」を使います。

.second { margin:10px 20px 10px 20px !important }

ただ、これを使うと強制的にそれが優先になってしまいます。

自分がすべてのCSSを理解していればいいんですが、ほかの人の手が入っていると意図していない場所もデザインが変わってしまうので注意が必要です。

ちょっと自分用のメモとして残しておきます。