コニファ・ロゴ

ツール集:[CSS] 記述したスタイルの優先順位の確認(2)

[CSS] 記述したスタイルの優先順位の確認(1)では、使用するセレクタの優先順位に確認しました。結果は次のようになります。

優先度の順位(右側ほど優先度が上位)

全称セレクタ < タイプセレクタ < class < タイプセレクタ付きclass < id < タイプセレクタ付きid

今回はこれに、疑似クラスを加えて確認してみます(確認した疑似クラスは、:link疑似クラスと:first-child疑似クラスだけです)。

サンプルは、"box"+ナンバーのテキストなどの背景色がそれぞれのテスト結果になります。

:link疑似クラスとclassでは、:link疑似クラスが優先(1)

// htmlソース
<div class="box1"><a class="box11" href="#">box1</a></div>

// CSSソース
.box1 a:link {
	background: pink;
	}
.box1.box11 {
	background: beige;
	}
:link疑似クラスが優先され「box1 a:link」の「pink」が適用されます。

:link疑似クラスとタイプセレクタ付きclassでは、記述順が後(下側)ほど優先(2)

// htmlソース
<div class="box2"><a class="box22" href="#">box2</a></div>

// CSSソース
.box2 a:link {
	background: pink;
	}
.box2 a.box22 {
	background: lightgreen;
	}}
cssの記述順の後(下側)が優先され「box1 a:link」の「pink」で上書きされます。

上の結果検証のため、CSSの記述順を逆にします(3)

// htmlソース
<div class="box3"><a class="box33" href="#">box3</a></div>

// CSSソース
.box3 a.box33 {
	background: lightgreen;
	}
.box3 a:link {
	background: pink;
	}
今度はclassの「.box3 a:link」の「pink」で上書きされます。(2)と同様に後(下側)が優先されていることが分かります。

:link疑似クラスとidでは、idが優先(4)

// htmlソース
<div class="box4"><a id="box44" href="#">box4</a></div>

// CSSソース
.box4 #box44 {
	background: lightblue;
	}
.box4 a:link {
	background: pink;
	}
:link疑似クラスとidでは、idが優先されるため、「#box44」の「lightblue」が適用されます。

:first-child疑似クラスとタイプセレクタ付きclassは:first-child疑似クラスが優先(5)

// htmlソース
<div class="box5">
    <ul>
        <li class="box55">box5-1(ターゲット)</li><li>box5-2</li><li>box5-3</li>
    </ul>
</div>

// CSSソース
.box5 li:first-child {
	background: pink;
	}
.box5.box55 {
	background: beige;
	}
first-child疑似クラスとタイプセレクタ無しclassでは、。first-child疑似クラスが優先されるため、「.box5 li:first-child」の「pink」が適用されます。
  • box5-1(ターゲット)
  • box5-2
  • box5-3

:first-child疑似クラスとタイプセレクタ付きclassでは、記述順が後(下側)ほど優先(6)

// htmlソース
<div class="box6">
    <ul>
        <li class="box66">box6-1(ターゲット)</li><li>box6-2</li><li>box6-3</li>
    </ul>
</div>

// CSSソース
.box6 li:first-child {
	background: pink;
	}
.box6 li.box66{
	background: beige;
	}
:first-child疑似クラスとタイプセレクタ付きclassでは、記述順が後(下側)ほど優先されるため、
「.box6 li.box66」の「beige;」に上書きされます。
  • box6-1(ターゲット)
  • box6-2
  • box6-3

上の結果検証のため、CSSの記述順を逆にします(7)

// htmlソース
<div class="box7">
    <ul>
        <li class="box77">box7-1(ターゲット)</li><li>box7-2</li><li>box7-3</li>
    </ul>
</div>

// CSSソース
.box7 li.box77{
	background: beige;
	}
.box7 li:first-child {
	background: pink;
	}
今度は:first-child疑似クラスの「pink」で上書きされます。(6)と同様に後(下側)が優先されていることが分かります。
  • box7-1(ターゲット)
  • box7-2
  • box7-3

:first-child疑似クラスとタイプセレクタ無しidでは、タイプセレクタ無しidが優先(8)

// htmlソース
<div class="box8">
    <ul>
        <li id="box88">box8-1(ターゲット)</li><li>box8-2</li><li>box8-3</li>
    </ul>
</div>

// CSSソース
.box8 #box88{
	background: lightgreen;
	}
.box8 li:first-child {
	background: pink;
	}
:first-child疑似クラスとタイプセレクタ無しidでは、タイプセレクタ無しidが優先されるため、「.box8# box88」が適用されます。
  • box8-1(ターゲット)
  • box8-2
  • box8-3

 

今回の結果

「:link疑似クラス」と「:first-child疑似クラス」の2つの疑似クラスセレクタとclass、idとで比較した結果、どちらの疑似クラスもタイプセレクタ付きclassと同等で、記述が後のほうが優先されます。他の疑似クラスはまだ確認していません。

優先度の順位(右側ほど優先度が上位)

全称セレクタ < タイプセレクタ < class < タイプセレクタ付きclass
疑似クラスセレクタ
 < id < タイプセレクタ付きid

 

[CSS] 記述したスタイルの優先順位の確認(3)

 

 

 

 

 

戻るボタン