toggle
札幌市東区にあるマンガ・イラスト制作、WEBデザイン・DTP制作、雑貨制作、MOSなどを学び、行う就労支援事業所です。
2017-09-29

セレクタの優先順位

こんにちは。web担当のまるです。すっかり寒くなり、私は咳喘息になりつつあります。
皆さんも風邪に気を付けて( ^ω^)・・・。

今日はセレクタによる優先順位…について説明したいと思います。
webについて知りたいなら過去にも色々綴っていますよ。↓↓

webについて
気になるお話
ノートの丸写し
SEО
1年の半分
うれしいたのしいだいすき
color
ポートフォリオ

さてさて、優先順位とは何でしょう?
それはいくつかありますので紹介しますね。

1. !importantと指定したスタイル
2. HTMLタグに直接書いて指定したスタイル
3. idセレクタで指定したスタイル
4. classセレクタ、属性セレクタ、疑似セレクタで指定したスタイル
5. 要素セレクタで指定したスタイル
6. 後に書いたスタイル
7. 全称セレクタ(*)で指定したスタイル

上の方が優先されるんですが、1を除き点数として示すことが出来るんですね。

要素セレクタ= 1点
classセレクタ= 10点
idセレクタ= 100点

その合計で優先順位が決まるのです。
なんじゃそら???(; ・`д・´)ってなりますよね。CSSでの記述によってブラウザがうまく反映されなかったりするんですよ!
2での、HTMLでの<style>内にCSSの記述の場合他のものより優先されます。CSS2.1まで1000点でした。

「#maru」はid属性なので100。
「P」は要素セレクタなので1。なので、「#maru」の方で赤文字になります。

HTMLでの<style>内にCSSの記述の場合、このPの中では後に記述した方が優先となります。同じ要素に対して複数のスタイルを指定した時に後に記述した方が上書きにされるので当然優先順位も高くなります。

…と、まぁこんな感じで説明しましたが、実際点数計算しながらなんて考えながらする人はいません。
だから「全然適用されない!」ってときに考えてみるというぐらいでしょうか。
ちなみに「!important」は使ったことないのであれなんですが、乱用すると危険みたいですので最終手段として使用した方がいいとのこと。

もうほんとね、webの世界は妖怪の世界です(笑)。訳がわからないこと多すぎて奥が深い。IEのエンコードがおかしいまま保存、それをメモリとかで他のパソコンで見ると外部データも入ってるからおかしなままとか!
更新アップロードとか見ると前は「またか(#^ω^)」って思っていたんですが今は「あ~、細かいとこでミスがあったんだろうなぁ」って思うようになりましたw

————

ここで話を終わります。余談ですが
キャリコネニュース?(ぽちっと)
ほんとにどうにかできないもんなんですかね~~~。なくてはならない職業なのに。

これで終わります。また!


関連記事