セレクタの優先順位について

HTML&CSS

こんにちは。

今日は金曜日ということで今週もお疲れ様でした^^

 

全然関係ない話ですが、今日は映画キャッツの公開日ですね(^○^)

職場でラジオをかけているのですがメモリーが流れる度に鳥肌が立っています笑

キャッツは劇団四季を観にいったことがありますが、映画も気になっています・・・!

という私事の話でした笑

 

セレクタの優先順位

ではそろそろ本題に入りますねー!

今日はセレクタの優先順位について改めてまとめておこうと思います♩

もし「何それー!」という方がいらしたら知る機会になれば幸いです^^

 

これを理解しておかないとコードは間違っていないのにCSSが適用されない、なぜ・・・

なんてことになるので(^^;

 

ではみていきましょう!

まず、セレクタの優先順位は

 

詳細度が高いもの

②後から記述したもの

 

この2つにより決定されます。

そしてより①の方が優先されます。

 

詳細度について詳しくご説明すると、セレクタの優先度の高さのことを意味します。

そしてセレクタの詳細度(優先度)は数値によって計算することができます!

 

  • id(#)・・・100点
  • class(.)・・・10点
  • タイプ(p,h1など)・・・1点

上記のようにidが100点と一番詳細度が高く、ごく普通のpやh1などは1点と一番低いです。

 

例えば

<p id=”name” class=”tit”>ふたっぱ </p>

#name {color: #111;}

.tit{color: #ccc;}

 

の場合はidの方が詳細度が高いので#nameの色が優先されます。

 

このようにidセレクタは詳細度が高いので、使ってしまうと後から上書きするのが大変です。(^^;

なので極力使わずに、headerやfooterなどの大きな項目につけるくらいがいいと思います。

 

より詳しく知りたい方は調べてみてくださいね^^

もっと複雑なケースもあると思いますので・・・

私も調べていて再度復習が必要だなと思いました(^^;

では今日はここまで〜〜

 

 

コメント

タイトルとURLをコピーしました