DAY 37 WEBサービス部 HTML & CSS 自主練 CSSセレクタの優先順位

DAY 37 WEBサービス部-Lesson9 / HTML & CSS 自主練-CSSセレクタ優先度 【ウェブカツ 】

Webサービス部 Lesson9 / 1hour

HTML & CSS / 0.5hour

Aug / 76.5hour

Total / 101.5 hour

 

参考書籍

CSSのセレクタ優先順位

CSSには「詳細度」という概念があり、簡潔にいうとどのセレクタが一番強いのか、という優先順位がある。

セレクタが競合した際は、順位が高い方が優先される。

順位は下記の通り。

 

HTMLのstyle属性 <style></style>で囲まれた部分

id属性 (#~~)

class属性 (.~~)

擬似クラス (:hoverなど)

属性 ([type=”text”]

擬似要素 (:beforeなど)

 

上記のような順位なので、例えば擬似クラスでスタイルをあててもclass属性が競合する場合には、class属性のスタイルが優先される。

マークアップする中で、「思った通りにスタイルが当てられない」といった時には、この優先順位が影響しているかもしれないことを、頭に入れておく。

 

 

 

DAY 37 WEBサービス部 HTML & CSS 自主練 CSSセレクタの優先順位
最新情報をチェックしよう!