jquery - CSSだけを使用して、すべての単語の最初の文字の色とフォントサイズを変更できますか？

Question

質問のタイトルと同様に、すべての単語の最初の文字の色とフォントサイズを変更することは可能ですか。たとえば、次の画像のように：

CSSだけでこれを行うことは可能ですか？jQueryを使用することはできますが、純粋なCSSまたはCSS3ソリューションでは使用できない場合に限ります。

Answer 1

このCSSを使用して、すべての単語を大文字にしたスモールキャップスのテキストを作成できます。

h1 {
    font-variant: small-caps;
    text-transform: capitalize;
}

ただし、CSSだけを使用して頭文字の色を変更することはできません。jQueryを使用spanしてテキストに要素を追加し、それらの要素のスタイルを設定する必要があります。このようなもの：

$('h1').html(function() {
    // Very crude regex I threw together in 2 minutes
    return $(this).text().replace(/\b([a-z])/gi, '<span class="caps">$1</span>')
});

このCSSで：

h1 {
    font-variant: small-caps;
    text-transform: capitalize;
}

h1 .caps {
    color: red;
}

Answer 2

JSFiddle

どうぞ -

<p class="each-word">First letter of every word is now red!</p>

.first-letter {
    color: red;
  }

window.onload = function(){
  var elements = document.getElementsByClassName("each-word")
  for (var i=0; i<elements.length; i++){
    elements[i].innerHTML = elements[i].innerHTML.replace(/\b([a-z])([a-z]+)?\b/gim, "<span class='first-letter'>$1</span>$2")
  }
}

Answer 3

:first-letter次のようなpsedo-elementを使用します。

.word:first-letter
{ 
   font-size:200%;
   color:#8A2BE2;
}

コメントが示唆するように、これは各単語がそれ自身の要素にある必要があります、例えば。<span>

しかし、これはOPが純粋なCSSで望んでいるものに近づくでしょう。

Answer 4

HTML

<h1>The title of this page goes here</h1>​

JQuery

$(document).ready(function() {
var words = $('h1').text().split(' ');
var html = '';
$.each(words, function() {
    html += '<span style="font-size:200%">'+this.substring(0,1)+'</span>'+this.substring(1) + ' ';
    });
    $('h1').html(html);
});​

JSFIDDLE