WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > CSSリファレンス > CSSの優先順位

CSSの優先順位

同じ要素に同じプロパティを複数を記述した場合、適用されるのは1つのみとなります。
適用順序は複雑となっていますが、大きく以下に分けることができます。

  1. 最後に記述した値が有効
  2. セレクタ種類により優先順位はかわる「ID > CLASS > 要素」
  3. 要素(タグ)に直接記述すれば優先順位は上がる
  4. 要素やクラスの組み合わせで優先順位は上がる
  5. 「!important」を記述すれば最優先
広告

1.最後に記述したスタイルが有効になる

以下のように最後に書いたスタイルが有効となります。


<style type="text/css">
  /* ----- 同一セレクタ内に同じプロパティを複数定義 ----- */
  .cls11 {
     color: red;
     color: blue;           /* ← 後に書いたこれが優先 */
  }
  /* ----- 別セレクタ内に同じプロパティを複数定義 ----- */
  .cls12 { color: red; }
  .cls12 { color: green; } /* ← 後に書いたこれが優先 */

<p class="cls11">あいうえお</p>
<p class="cls12">あいうえお</p>

あいうえお

あいうえお

ページTOP

2.セレクタ種類により優先順位はかわる「ID > CLASS > 要素」

指定するセレクタにより優先順位は変わります。
セレクタの種類は「CSS(スタイルシート)のセレクタ指定方法」でご確認ください。


<style type="text/css">
  #id21  { color: red;   }
  .cls21 { color: blue;  }
  p      { color: green; }
</style>

<p>あいうえお</p>                          <!-- 要素のみ         → green          -->
<p id="id21">かきくけこ</p>               <!-- ID指定           → ID優先 red     -->
<p class="cls21">さしすせそ</p>           <!-- クラス指定       → クラス優先 blue -->
<p class="cls21" id="id21">たちつてと</p> <!-- IDとクラスを指定 → ID優先 red      -->
<p id="id21" class="cls21">なにぬねの</p> <!-- 逆にしていしても → ID優先 red      -->
ページTOP

3.要素(タグ)に直接記述すれば優先順位は上がる

要素(タグ)に直接「STYLE」を記述した場合は優先順位が上がります。


<style type="text/css">
  #id31  { color: red; }
</style>

<p id="id31">あいうえお</p>                       <!-- IDに指定されたスタイルが有効 → red -->
<p id="id31" style="color:blue">かきくけこ</p> <!-- 直接記述されたスタイルが有効 → blue -->

あいうえお

かきくけこ

ページTOP

4.要素やクラスの組み合わせで優先順位は上がる

セレクタや疑似要素、疑似クラス、属性セレクタの組み合わせによりスタイルの優先順位は変わります。基本的により具体的な指定が優先されます。
セレクタの種類は「CSS(スタイルシート)のセレクタ指定方法」でご確認ください。


<style type="text/css">
  .cls41 p            { color: red;   }  /* (1) */
  .cls41 p[lang="ja"] { color: green; }  /* (2) */
  .cls41              { color: blue;  }  /* (3) */
</style>

<div class="cls41">
  <p>あいうえお</p>              <!-- 上記(1)が適用される → red   -->
  <p lang="ja">あいうえお</p>    <!-- 上記(2)が適用される → green -->
  <div>かきくけこ</div>      <!-- 上記(3)が適用される → blue  -->
</div>

あいうえお

あいうえお

かきくけこ
ページTOP

5.「!important」を記述すれば最優先

「!important」を指定すると最優先となります。ただし「!important」を多用すると「!important」間の優先順位が発生し混乱のもととなるため、なるべく使用しないことをお勧めします。


<style type="text/css">
  #id51  { color: red;   }
  .cls51 { color: blue !important; }   /* ← !important が最優先 */
</style>

<p class="cls51" id="id51" style="color:green">あいうえお</p>

あいうえお

ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン