コニファ・ロゴ

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

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

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

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

[CSS] 記述したスタイルの優先順位の確認(2)では、疑似クラスセレクタも含めてセレクタの優先順位に確認しました。結果は次のようになります(ただし、調べた疑似クラスは、:link疑似クラスと:first-child疑似クラスの2つだけです)。

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

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

今回は(1)に疑似要素を加えて確認してみます。

 

(1)::first-letter疑似要素とタイプセレクタ付きclassでは、::first-letter疑似要素が優先

// htmlソース
<div class="sample1">
    <span class="red">さ</span>んぷるてきすとサンプルテキストだみーてきすとダミーテキスト
    さんぷるてきすとサンプルテキストだみーてきすと
</div>

// CSSソース
.sample1::first-letter {
	color: blue; font-weight: bold;
	}
.sample1 span.red {
	color: red; font-weight: bold;
	}	
::first-letter疑似要素は、ブロックの最初の文字に対してスタイルを適用します。サンプル(1)は、最初の文字「さ」に対して、::first-letter疑似要素とタイプセレクタ(祖先、親要素)付きclassで、同時にスタイル(color)を指定していますが、:first-letter疑似要素のほうが優先され、colorはblueになります。

サンプル(1)

んぷるてきすとサンプルテキストだみーてきすとダミーテキストさんぷるてきすとサンプルテキストだみーてきすと

 

(2)::first-letter疑似要素とタイプセレクタ付きidでも、::first-letter疑似要素が優先

// htmlソース
<div class="sample2">
    <span id="red">さ</span>んぷるてきすとサンプルテキストだみーてきすとダミーテキスト
    さんぷるてきすとサンプルテキストだみーてきすと
</div>

// CSSソース
.sample2::first-letter {
	color: blue; font-weight: bold;
	}
.sample2 span#red {
	color: red; font-weight: bold;
	}
サンプル(2)は、ブロックの最初の文字「さ」に対して、::first-letter疑似要素とタイプセレクタ(祖先、親要素)付きidで、同時にスタイル(color)を指定していますが、(1)と同じく、::first-letter疑似要素のほうが優先され、colorはblueになります。

サンプル(2)

んぷるてきすとサンプルテキストだみーてきすとダミーテキストさんぷるてきすとサンプルテキストだみーてきすと

 

(3)::first-letter疑似要素とinlineスタイルでも、::first-letter疑似要素が優先

// htmlソース
<div class="sample3">
    <span style="color: red; font-weight: bold;">さ</span>んぷるてきすとサンプルテキスト
    だみーてきすとダミーテキストさんぷるてきすとサンプルテキストだみーてきすと
</div>

// CSSソース
.sample3:first-letter {
	color: blue; font-weight: bold;
	}
サンプル(3)は、最初のテキストの「さ」に対して、:first-letter疑似要素とinlineで、同時にスタイル(color)を指定していますが、これも:first-letter疑似要素のほうが優先され、colorはblueになります。
んぷるてきすとサンプルテキストだみーてきすとダミーテキストさんぷるてきすとサンプルテキストだみーてきすと

 

(4)::first-line疑似要素とclassでは、classが優先

// htmlソース
<div class="sample4">
	<span class="pink">さんぷるてきすとサンプルテキスト</span>だみーてきすと
  ダミーテキストさんぷるてきすとサンプルテキストだみーてきすと
</div>

// CSSソース
.pink {
	color: #000; background: pink;
	}
.sample4::first-line {
	color: #000; background: lightgreen;
	}
::first-line疑似要素は、ブロックの最初の行にスタイルを適用します。::first-line疑似要素とclassでは、classが優先されるため、最初の行の「background」に「pink」が適用されます。なお、classの行の指定を短めにしているため、行の後ろ部分は、::first-line疑似要素の指定による「lightgreen」になっています。

サンプル(4)

さんぷるてきすとサンプルテキストだみーてきすとダミーテキストさんぷるてきすとサンプルテキストだみーてきすと

 

(5)::first-line疑似要素とタイプセレクタでは、タイプセレクタが優先

// htmlソース
<div class="sample5">
	<span>さんぷるてきすとサンプルテキスト</span>だみーてきすとダミーテキストさんぷるてきすとサンプルテキストだみーてきすと
</div>

// CSSソース
.sample5 span {
	color: #000; background: plum;
	}
.sample5::first-line {
	color: #000; background: lightgreen;
	}
::first-line疑似要素とタイプセレクタでは、タイプセレクタが優先されるため、最初の行の「background」に「plum」が適用されます。このケースでは、他にspanを使用しているため、親のclass付きになっていますが、親のclass無しの単独でもタイプセレクタが優先されることを確認しています。なお、(4)と同様にspanの行の指定を短めにしているため、行の後ろ部分は、::first-line疑似要素の指定による「lightgreen」になっています。

サンプル(5)

さんぷるてきすとサンプルテキストだみーてきすとダミーテキストさんぷるてきすとサンプルテキストだみーてきすと

 

今回の結果

疑似要素のうち、他のセレクタと同時に指定して比較できるのは、「::first-letter疑似要素」と「::first-line疑似要素」の2つだけだと思います(多分)。この2つの疑似要素の優先度は疑似クラスと比べると、大きく違っていますので、それぞれ別の表にしてみます。なお、全称セレクタは省略します。

::first-letter疑似要素の優先度の順位(右側ほど優先度が上位)

タイプセレクタ < class < タイプセレクタ付きclass < id < タイプセレクタ付きid < インライン < ::first-letter疑似要素

::first-line疑似要素の優先度の順位(右側ほど優先度が上位)

::first-line疑似要素 < タイプセレクタ < class < タイプセレクタ付きclass < id < タイプセレクタ付きid < インライン

 

 

 

 

 

 

 

戻るボタン