色の変更CSSの最初の6文字のテキスト

Question

私はフレーズClient Testimonialと私はClientだけを変更したいと思う私はfirst-letterを使用しているが、色を変更するCSSの任意のメソッドがあります。

Answer 1

:beforeはどうですか？

私は "お客様の声" に "クライアントお客様の声" からテキストを変更し、CSSで:beforeルール適用されます：

HTML：

<div class="word">Testimonial</div>​​​​​​​​ 

CSS：

を

.word { 
color: black;  
} 
.word:before { 
color: red; 
content: "Client "; 
} 

例：http://jsfiddle.net/LvZt7/

Answer 2

spanに単語をラップし、代わりにスタイルを設定できます。 Henrik Ammerがコメントに述べたように、:first-wordはありません。

Answer 3

<p><span style="color: #c0ff33;">Client</span> Testimonial</p> 

はい、ちょうど<span></span>とそのような状況に最適です。

編集：

この編集は、投稿者のためではなく、単にCSSを使用することを学んで誰かのために向けられていない：1の方法でスタイルを設定するための別の.cssファイルを使用することを検討すべきである「ベスト・プラクティス」に基づきます以下のような：

.client { 
    color: #c0ff33; 
} 

、それが好きで使用して：

<p><span class="client">Client</span> Testimonial</p> 

あなたがより多くを指定し、証明書になりたい場合は

p span.client { 
    color: #c0ff33; 
} 

はフィドル：：

： http://jsfiddle.net/LvZt7/97/

あなたはそれにまたがるあなたのpのクラスを指定していない他の方法で回避をも行うことができ、あなただけあなたも好き、それを導入する可能性<p></p>の内側にあなたのspanスタイルを使用することをAIN

<p class="client"><span>Client</span> Testimonial</p> 

と

p.client span { 
    color: #c0ff33; 
} 

または単に色#c0ff33とスパン内のテキストを持っている全てのpスパンHTMLマークを指定する：他の人が述べたように

<p><span>Client</span> Testimonial</p> 

と

p span { 
    color: #c0ff33; 
} 

Answer 4

、（残念ながら*）があるなし:first-word擬似セレクタCSS（バージョン3または4でも、私が現在知っている限り）です。しかし、JavaScriptなしで存在する可能性は2つありますが、両方とも失敗があります。

p span { 
    color: #f90; 
} 

JS Fiddle demo：ハイライトと

<p><span>Client</span> Testimonial</p>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

とスタイルスパン：

まず、最も簡単なは、単にスパンの最初の単語をラップすることです。

このアプローチでは、余分な、この場合はspanという要素をスタイリング目的で追加する必要がありますが、実装するのは簡単で、クロスブラウザで確実に動作します。

秒ことを回避するには余分なspanタグを追加するのに、少し壊れやすいですが、属性を追加することを、代わりに、必要があります。

<p data-highlightword="Client">Client Testimonial</p>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

以下CSSで：

p[data-highlightword] { 
    position: relative; 
} 

p[data-highlightword]::before { 
    content: attr(data-highlightword); 
    color: #f90; 
    position: absolute; 
    top: 0; 
    left: 0; 
}​ 

JS Fiddle demo 。

このアプローチでは、1つの要素に1つの属性を追加することに依存しますが、余分なCSSが必要であり、準拠したブラウザでのみ機能します。これはほとんどすべてのものですが、現在はIE 8のみ、あるいはおそらく9、そしてそれ以下で問題があることが証明されています。

Answer 5

私はこのような何かをやってお勧めします：

<span class = "redcolor">Client </span> Testimonial 

CSS：

.redcolor 
{ 
    color: red 
} 

あなたが赤で何かをしたい場合はその方法は、ちょうどそのクラスとそれにDIV /スパンを与える