では、疑似クラスセレクタも含めてセレクタの優先順位に確認しました。結果は次のようになります(ただし、調べた疑似クラスは、:link疑似クラスと:first-child疑似クラスの2つだけです)。
(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つの疑似要素の優先度は疑似クラスと比べると、大きく違っていますので、それぞれ別の表にしてみます。なお、全称セレクタは省略します。