!importantはもう使わない！CSSの優先順位をおさらいしよう

先日の台風で梅雨が明けた気分になっていましたが、全然そんなことなかったです。 こんにちは、フロントエンドエンジニアのあつこです。 HTMLとCSSでお仕事をするようになって暫く経つのですが 未だにスタイル効かない、何故だ。。。→優先度が低かった！ってことがたまに起こります。 Sass等メタ言語を使ってると、コンパイル後の形を想像しにくくなるのですね(´・ω:;.:... 今日はそんな「CSSにおけるスタイルの適応の優先順位」についてまとめてみました。 もくじ 0.デモの準備 1.基本の優先順位 2.タイプセレクタとclassセレクタ 3.親要素と一緒に指定する 4.idセレクタとclassセレクタ 5.つまりどうゆうこと？ 6.最終奥義!important宣言 おまけ.IEのセレクタの限界のはなし 「ある程度なら知ってるよ！」って方は5.つまりどうゆうこと？から読んでもらえれば大丈夫かと思

[yatta47]

これであなたも思い通り！！

[kic-yuuki]

ありがとうございます。助かりました。

[yoknst]

css

[koogawa]

おさらいしている

[hatanaka_akihiro]

遠い親でも idセレクタを使うと、優先順位が高くなってしまうのね。id セレクタは、よくよく考えて使った方がよさそうだ。CSS ムズイ。

[windish]

わかりやすい

[yomikodesign]

すごい分かり易い。困ったら計算してみよう。

[roosh]

css

[luccafort]

点数なるほど、これはわかりやすい。困ったときはこの点数表を参考にしよう。

[igrep]

詳しい。

[maritimecolor]

大事！！