cambia colore css solo prima 6 caratteri di testo

Question

Ho la frase Client Testimonial e voglio cambiare solo il Client ho usato solo first-letter ma c'è un metodo in css per cambiare colore .. no javascript per favore.

Answer 1

Come sull'utilizzo :before?

vorrei cambiare il testo da "Client Testimonial" a "Testimonial", e poi con i CSS applicare la :before regola:

HTML:

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

CSS:

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

Esempio: http://jsfiddle.net/LvZt7/

Answer 2

È possibile suddividere la parola in un span e modificarla. Come ha affermato Henrik Ammer in un commento, non esiste lo :first-word.

Answer 3

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

quindi sì, proprio lo stile con <span></span> la sua perfetta per questo tipo di situazioni.

Edit:

Questa modifica non è diretto per il posto dell'autore, ma per qualcuno solo imparare ad usare i CSS: sulla base di "buone pratiche" si dovrebbe considerare l'utilizzo di file .css separato per impostare gli stili in maniera come:

.client { 
    color: #c0ff33; 
} 

e di utilizzarlo come:

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

Se si desidera specificare più ed essere cert ain di utilizzare solo il tuo stile span all'interno <p></p> si potrebbe anche introdurre le cose come:

p span.client { 
    color: #c0ff33; 
} 

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

Si potrebbe anche fare viceversa specificare la classe p e non estendersi:

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

e

p.client span { 
    color: #c0ff33; 
} 

o semplicemente specificando tutti marcature p campata html avere testo all'interno lunghi, con colore #c0ff33:

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

e

p span { 
    color: #c0ff33; 
} 

Answer 4

Come notato da altri, v'è (purtroppo *) non :first-word pseudo-selettore disponibili in CSS (anche versione 3 o 4, per quanto ne so attualmente). Tuttavia, esistono due possibilità che esistono senza JavaScript, sebbene entrambe abbiano i loro difetti.

Il primo, e più semplice, è quello di avvolgere semplicemente la prima parola in un arco:

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

E lo stile l'arco con il momento clou:

p span { 
    color: #f90; 
} 

JS Fiddle demo.

Mentre questo approccio richiede l'aggiunta di un elemento aggiuntivo, in questo caso, l'elemento span per motivi di stile è semplice da implementare e funziona in modo affidabile tra browser.

Il secondo è leggermente più fragile, anche se evita l'aggiunta del span tag estranei, ma richiede, invece, che si aggiunge un attributo:

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

Con il seguente 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 .

Questo approccio si basa sull'aggiunta di un singolo attributo di un singolo elemento, ma richiede più CSS e funziona solo nei browser compatibili. Il che è quasi tutto, ora, con solo IE 8, o forse 9, e al di sotto si rivela problematico.

Answer 5

vi consiglio di fare qualcosa di simile:

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

CSS:

.redcolor 
{ 
    color: red 
} 

In questo modo se si desidera qualcosa di rosso, basta dargli un div/span con quella classe