div::first-letter {color: tomato;
font-size: 40px;
}
<form>
<div class="encabezado">RapiNoticias</div>
</form>
¿Cómo puedo poner las 2 letras que están en mayúscula en color "tomato"? (sería la letra R y la letra N en este caso).
Puedes encerrar la letra deseada en una etiqueta span
, cuyo uso básico es el de poder formatear parte de un determinado texto de forma independiente...
div::first-letter {color: tomato;
font-size: 40px;
}
span {color: tomato;
font-size: 40px;
}
<form>
<div class="encabezado">Rapi<span>N</span>oticias</div>
</form>
Buscando solución a una pregunta parecida a esta sobre cómo cambiar el estilo de la primera letra de cada palabra, he modificado ligeramente esta respuesta de StackOverflow de forma que se establezca un formato distinto - color tomato, en este caso - para todas las letras mayúsculas que se encuentren dentro de un texto determinado.
La mejora respecto a la solución aceptada es que las etiquetas <span>
se generan automáticamente. No hay que enmarcar manualmente aquellas letras que queramos cambiar de color. El código cambiará todas las mayúsculas que encuentre.
window.onload = function(){
var elements = document.getElementsByClassName("bloque-tomato")
for (var i=0; i<elements.length; i++){
elements[i].innerHTML = elements[i].innerHTML.replace(/([A-Z])([a-z]+)?/g, "<span class='letra-tomato'>$1</span>$2")
}
}
.letra-tomato {
color: tomato;
}
<p class="bloque-tomato">Todas LaS mayUscuLAS en coloR TomaTo!</p>
La parte javascript del código lo que hace es recuperar todos los elementos de la clase bloque-tomato, que son aquellos sobre los que queremos aplicar nuestro algoritmo.
var elements = document.getElementsByClassName("bloque-tomato")
Sobre cada uno de esos elementos encontrados, reemplazamos su contenido aplicando una expresión regular:
"/([A-Z])([a-z]+)?/gm"
En dicha expresión se distinguen dos partes: ([A-Z]) que significa letra mayúscula y ([a-z]+) que significa todas las letras minúsculas que vengan a continuación. La primera parte se asocia a $1 al reemplazar y la segunda a $2
<span class='letra-tomato'>$1</span>$2
La parte de /g significa global [No pares en el primer match, continua reemplazando]. De forma que todas las letras mayúsculas se verán enmarcadas automáticamente en etiquetas <span>
que le aplicarán el formato.
Creo que algo así es lo que estaba intentando adaptar KamiSama con peor fortuna.