CSS をコーディングしていると、同じプロパティに異なる値が指定されていたりします。
そのような場合、CSS スタイルの優先順位が適用される。
CSSの優先順位は、
- CSSの記述方法
- セレクタの種類
- CSSの記述する順番
によって決定される。
CSSの適用方法によって決まる優先順位
HTMLファイルに、CSSを適用させる方法は、
- 外部参照
- 内部参照
- インライン
の３種類ある。
これらによって決まるCSSの優先順位は、
インライン ＞ 内部参照 ＞ 外部参照
となる。
・・・
<link rel="stylesheet" href="style.css" type="text/css">
<style type="text/css">
body { background-color: white; } 内部参照
</style>
</head>
<body style="background-color: black;"> インライン
<h1>Hello!!</h1>
</body>
</html>
外部参照：外部ファイルのCSSファイルを読み込む。
上記のファイルの場合、インラインの指定が優先され、body 要素の背景色は、黒となる。
セレクタの種類によって決まるCSSの優先順位
id セレクタや class セレクタなどの具体的、局所的セレクタが、優先される。
id セレクタ > class セレクタ > タイプセレクタ > 全称セレクタ
要素を特定した id セレクタ、class セレクタは、要素を特定しない id セレクタ、class セレクタよりも優先される。
CSSの記述の順番によって決まるCSSの優先順位
CSSの記述する順番が、後の方、ファイル内では、記述が下の方が、優先されて、CSSが適用される。
例外的に、[!important] を付けてスタイル指定すると、最優先される。
.fuga{color: orange !important;}
複雑で、どのCSSの指定が適用されているのか、わからないような場合に、最終手段として用いられる。
ただし、多用してはならない。
詳細度
これら、CSSの優先順位の規則を組み合わせの優先度。
セレクタの詳細度とは、セレクタがどれだけ細かく指定されているかを示すもの。
この値が最も大きいセレクタが最優先される。
詳細度が全く同じ場合
後から記述されたセレクタが優先される。
詳細度の高いセレクタと低いセレクタが被った場合
記述された順番に関わらず、詳細度の高いセレクタが優先される。
詳細度の基本法則
- タグ＜class<id の順に詳細度が高くなり、優先順位が上がる。
- 記述場所が「外部参照＜内部参照＜インライン指定」の順に詳細度が高くなり、優先順位が上がる。
- 子孫セレクタ等でセレクタが複数になっている場合は、より詳しく指定されている方が優先される。
詳しくは、下記の記事を。
詳細度 (スタイルの優先順位) | CSS解説 cssの詳細度・優先度を理解し使いこなすために必要なたった1つのこと – Qiita エンジニアはもう一度CSSとちゃんと向き合ってみよう – 詳細度編 – Qiitaオススメ書籍
CSS3開発者ガイド 第2版 ―モダンWebデザインのスタイル設計
HTML5＆CSS3標準デザイン講座 30LESSONS【第2版】
この記事を読んだ人はこんな記事にもご興味があるかも
2016-08-15 [ jQuery ] 基本、基礎知識![[ 起業 ] 資金計画：起業に掛かるお金](https://i0.wp.com/webdesign.ki-blog.biz/wp-content/plugins/wordpress-23-related-posts-plugin/static/thumbs/19.jpg?resize=150%2C150&ssl=1)
2017-10-21 [ 起業 ] 資金計画：起業に掛かるお金
2016-12-23 ランディングページ、テンプレートリンク集サイトまとめ11選
2017-12-22 [ jQuery ] jQuery を利用する
2017-07-23 Google Fonts の使い方
2017-09-30 [ Illustrator ] 花の作成方法（作り方）
(Visited 1,089 times, 1 visits today)