// 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になります。
// 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になります。
// 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になります。
// 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」になっています。
// 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」になっています。