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