change color css only first 6 character of text

Question

I have phrase as Client Testimonial and i want to change only the Client i have used only first-letter but is there any method in css to change color .. no javascript please.

Answer 1

How about using :before?

I would change the text from "Client Testimonial" to "Testimonial", and then with CSS apply the :before rule:

HTML:

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

CSS:

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

Example: http://jsfiddle.net/LvZt7/

Answer 2

As noted by others, there is (unfortunately*) no :first-word pseudo-selector available in CSS (even version 3 or 4, so far as I currently know). However, there are two possibilities that exist without JavaScript, though both have their failings.

The first, and easiest, is to simply wrap the first word in a span:

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

And style the span with the highlight:

p span {
    color: #f90;
}

JS Fiddle demo.

While this approach does require adding an extra, in this case, span element for styling purposes it is simple to implement, and works reliably cross-browser.

The second is slightly more fragile, though avoids adding the extraneous span tag, but requires, instead, that you add an attribute:

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

With the following 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.

This approach relies on the addition of a single attribute to a single element, but does require extra CSS and will only work in compliant browsers. Which is almost all of them, now, with only IE 8, or perhaps 9, and below proving problematic.

Answer 3

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

so yes, just style it with <span></span> its perfect for that kind of situations.

Edit:

This edit is not directed for the post author but for someone just learning to use css: based on "best practises" one should consider using separate .css file for setting styles in a manner like:

.client {
   color: #c0ff33;
}

and using it like:

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

If you want to specify more and be certain that you only use your span style inside <p></p> you could also introduce it like:

p span.client {
   color: #c0ff33;
}

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

You could also do it other way around specifying your p class and not span:

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

and

p.client span {
   color: #c0ff33;
}

or just specifying all p span html markings to have text inside span with color #c0ff33:

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

and

p span {
   color: #c0ff33;
}

Answer 4

You could wrap the word in a span and style it instead. As Henrik Ammer stated in a comment, there is no :first-word.

Answer 5

i'd recommend doing something like this:

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

CSS:

.redcolor
{
    color: red
}

That way if you want anything in red, just give it a div/span with that class