2

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

0

2 respuestas 2

3

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>

1

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.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.