Challenge programming

HTML,CSS

CSSルールが適用される優先順位ついて

同じHTML要素に適用されるCSSルールが複数あるとき、優先順位が高いルールが低いルールをプロパティ単位で上書きします。 優先順位は「詳細度」と「カスケード」という2つの規則で決定されます。

詳細度

CSSのセレクタ―には「詳細度」と呼ばれる点数がついています。詳細度の点数が高いセレクタ―のレールが、点数の低いセレクタ―のルールを上書きします。 基本的には、より特定の要素をピンポイントで選ぶセレクタ―のほうが、どんな要素にでもマッチするセレクタ―よりも詳細度が高くなります。

タイプセレクタ―、クラスセレクターなど、セレクタ―の種類によってそれぞれ下記のように点数が決まっています。 CSSルールの詳細度は、使われているセレクタ―の点数を足し合わせて計算します。

セレクタ―の種類点数
タグのstyle属性に書かれたCSSルール1000
IDセレクター1個につき100
クラスセレクター、属性セレクター、疑似クラスなど1個につき10
タイプセレクター、疑似要素(::after,::beforeなど)1個につき1
全称セレクタ―0

計算例
セレクタ―個々のセレクタ―の種類点数式詳細度
*全称セレクタ―00
olタイプセレクタ―11
ul olタイプセレクタ― + タイプセレクタ―1 + 12
ol:first-childタイプセレクタ― + 疑似クラス1 + 1011
ul ol.greenタイプセレクタ― + タイプセレクター + クラスセレクター1 + 1 + 1012
h3 *[rel="up"]タイプセレクタ― + 全称セレクター + 属性セレクター1 + 0 + 1011
#loadIDセレクタ― 100100
style=""タグのスタイル属性 10001000

カスケード

CSSルールは、先に書かれたルールから順に適用されます。 そして、HTMLの同じ要素に適用され、かつ詳細度が同じセレクターのルールが出てきた場合は、後から出てきたほうが先のルールをプロパティ単位で上書きします。 この上書き規則のことをカスケードと言います。

この本を参考に、完成させることができました。しかし、プログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません(ToT) その点、この本では丁寧な解説が載っています。解説とともにコードを書き、完成させれば資格取得に必要なHTMLやCSSについてより深く学ぶことができます(^.^) 身に付けて消えないスキルがこの値段。買っておいてよかったです。

やっぱりプロの人から直接学びたいという方はこちら。| Click here if you want to learn directly from professionals

キャリアアップに必要なスキルを取得しよう。| Get the skills you need to advance your career.

オンラインで受講ができるスクールですので、全国どこからでも。 | Since it is a school where you can take classes online, you can take it from anywhere in the country.

ぺージの先頭に戻る(Return to top of page)


©2020年9月 Challenge programming

プライバシーポリシー