cambiar color css solo primero 6 caracteres de texto

Question

Tengo la frase Client Testimonial y quiero cambiar solo Client solo he usado pero hay algún método en css para cambiar el color ... no javascript por favor.

Answer 1

¿Qué le parece usar :before?

que cambiaría el texto de "Testimonio del Cliente" a "Testimonio", y luego con CSS aplicar la regla :before:

HTML:

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

CSS:

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

Ejemplo: http://jsfiddle.net/LvZt7/

Answer 2

Puede envolver la palabra en un span y darle un estilo en su lugar. Como dijo Henrik Ammer en un comentario, no hay :first-word.

Answer 3

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

así que sí, simplemente diseñarlo con <span></span> es perfecto para ese tipo de situaciones.

Editar:

Esta edición no está dirigido para el puesto autor, pero para alguien que acaba de aprender a utilizar CSS: basado en las "mejores prácticas" que uno debe considerar el uso de archivos .css independiente para el establecimiento de estilos de una manera como:

.client { 
    color: #c0ff33; 
} 

y usarlo como:

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

Si desea especificar más y ser cert ain que sólo utilice su estilo span dentro <p></p> también podría introducirlo como:

p span.client { 
    color: #c0ff33; 
} 

violín: http://jsfiddle.net/LvZt7/97/

También podría hacerlo revés especificando su p class y no abarcar:

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

y

p.client span { 
    color: #c0ff33; 
} 

o simplemente especificando todas las marcas p lapso de html para que el texto dentro de lapso de color #c0ff33:

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

y

p span { 
    color: #c0ff33; 
} 

Answer 4

Como han dicho otros, no es (por desgracia *) sin :first-word pseudo-selector disponibles en CSS (incluso la versión 3 o 4, hasta donde yo sé). Sin embargo, existen dos posibilidades sin JavaScript, aunque ambas tienen sus fallas.

La primera, y más fácil, es simplemente envolver la primera palabra en un lapso:

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

Y el estilo en el tramo con el punto culminante:

p span { 
    color: #f90; 
} 

JS Fiddle demo.

Si bien este enfoque requiere agregar un elemento extra, en este caso, span para el diseño, es simple de implementar y funciona de manera confiable entre navegadores.

El segundo es un poco más frágil, aunque evita la adición de la span etiqueta extraña, sino que requiere, en cambio, que se agrega un atributo:

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

Con el siguiente 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 .

Este enfoque se basa en la adición de un único atributo a un solo elemento, pero requiere CSS adicional y solo funcionará en navegadores compatibles. Que es casi todos ellos, ahora, con solo IE 8, o tal vez 9, y debajo resulta problemático.

Answer 5

te recomiendo hacer algo como esto:

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

CSS:

.redcolor 
{ 
    color: red 
} 

De esta forma si quieres algo de rojo, sólo le dan un div/span con esa clase