CSSが適用される優先順位とは? | ーーーーーー

こんにちは!

 

あけましておめでとうございます。
 

年始はみなさんどのようにお過ごしでしょうか?

 

私は基本的に、クリエイティブな仕事をするときはおしゃれなカフェが捗りますが、

コツコツ地道な作業系の仕事をするときは同じカフェでもチェーン店が落ち着きます。

(今日は知識深めたいモードで、ワイヤードカフェです)

 

 

ただ現実は、まだ課題ができず・・・ (まだかい!w)

精神的に不安すぎるので、課題と並行できる程度で週4日働くことにしましたPC

 

 

 

 

今年からはフリーランス!と考えていたのでだいぶ時間はかかってしまいましたが、

辞めなければ負けてない!っていうね。(フリースタイルダンジョンFORKさんの言葉。)

そんな感じで進んでいこうと思いますっ!

 

 

 

 

では、今日のメモ鉛筆

 

CSSの上書きルールが知りたい!

 

 CSSには『一度設定されたプロパティの値が、後から出てきた、or 詳細度の高いプロパティの値にどんどん上書きされる』という特徴があります。

 

その上書きルールのことを『カスケード』と言います。

 

CSSとは『カスケード・スタイル・シート』を略したものなのです。

 

 

 

シンプルなウェブサイトならばあまり影響はありませんが、

以前に誰かが作ったCSSを変更するときや複雑なウェブサイトになると、

この上書きルールを知らなければ混乱することも出てくるでしょう。

 

 

 

そのために、このルールを覚えておきましょう!

 

①デフォルトのCSSよりも製作者のCSSが優先される

importantが最強!

③詳細度は点数によって決められる

 

①②の内容は、前に書いた CSSのセレクタ名の付け方 を参考に。

 

 

では③の詳細度はどのようなものなのでしょうか?

 

詳細度の計算方法

 

CSSの強さ、弱さは使われるセレクタによって決まります。

それぞれのセレクタには点数があり、下記のようになります。

 

*全称セレクタ・・・・0点

タイプセレクタ、擬似セレクタ・・・1点

クラスセレクタ、属性セレクタ、擬似クラス・・・10点

idセレクタ・・・・・100点

HTMLのstyle属性・・・・1000点

 

 

その点数の合計点がセレクタの詳細度となります。

 

なので

例えば、「h1」 は1点。

「.wrapper」は10点。

「.nav li」は11点。

「p.lead」も11点。

「#contact」は100点。

 

 

スタイルが効かないと思ったらこの点数が少ない可能性があります。

 

 

 

また、ウェブサイトを更新するときなどメンテナンスをする上で、

セレクタの詳細度を極力低く保っておくことも重要なポイントです!

 

とりあえずこんなんでも覚えておくと便利なのでメモしておきました。
以上.