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

優先度の順位（右側ほど優先度が上位）

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

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

:link疑似クラスとclassでは、:link疑似クラスが優先（１）

// 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では、記述順が後（下側）ほど優先（２）

// 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の記述順を逆にします（３）

// 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」で上書きされます。（２）と同様に後（下側）が優先されていることが分かります。

:link疑似クラスとidでは、idが優先（４）

// 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疑似クラスが優先（５）

// 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」が適用されます。

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

// 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;」に上書きされます。

上の結果検証のため、CSSの記述順を逆にします（７）

// 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」で上書きされます。（６）と同様に後（下側）が優先されていることが分かります。

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

// 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」が適用されます。

 

今回の結果

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

優先度の順位（右側ほど優先度が上位）

 

[CSS]　記述したスタイルの優先順位の確認（３）