¿Puedo usar solo CSS para cambiar el color y el tamaño de la letra de la primera letra de cada palabra?

Question

Al igual que en el título de la pregunta, ¿es posible cambiar el color y el tamaño de la primera letra de cada palabra? Por ejemplo, como la siguiente imagen:

¿Es posible hacer esto con única CSS? Podría usar jQuery pero solo si no es posible con una solución pura de CSS o CSS3.

Answer 1

Puede producir textos en pequeñas tapas con cada palabra en mayúscula usar este CSS:

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

Pero usted no será capaz de cambiar el color de las letras iniciales usando CSS solo; Tendrás que usar jQuery para agregar elementos span a tu texto y luego diseñar esos elementos. Algo como esto:

$('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>') 
}); 

Con este CSS:

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

h1 .caps { 
    color: red; 
} 

Answer 2

Utilice la psedo-elemento :first-letter, como:

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

Como sugiere el comentario, esto necesita cada palabra para estar en su propio elemento, ej. <span>

Pero esto es lo más cerca que obtendrá de lo que OP quiere en CSS puro.

Answer 3

JSFiddle

Aquí tiene -

<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 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