[`yahoo` not found]
Delicious にシェア
Digg にシェア
[`evernote` not found]
LINEで送る
Pocket

 

CSS をコーディングしていると、同じプロパティに異なる値が指定されていたりします。

そのような場合、CSS スタイルの優先順位が適用される。

CSSの優先順位は、

  • CSSの記述方法
  • セレクタの種類
  • CSSの記述する順番

によって決定される。

CSSの適用方法によって決まる優先順位

HTMLファイルに、CSSを適用させる方法は、

  1. 外部参照
  2. 内部参照
  3. インライン

の3種類ある。

これらによって決まる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

オススメ書籍




10日でおぼえるCSS/CSS3入門教室

CSS3開発者ガイド 第2版 ―モダンWebデザインのスタイル設計

HTML5&CSS3標準デザイン講座 30LESSONS【第2版】

 

(Visited 961 times, 1 visits today)
[`yahoo` not found]
Delicious にシェア
Digg にシェア
[`evernote` not found]
LINEで送る
Pocket

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください