0

Tengo el siguiente css que selecciona perfectamente la primera letra de un párrafo...

p:first-letter {
  margin-right: 10px;
  background-color: black;
  color: white;
  padding: 10px 20px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}
<p>Esto es un párrafo</p>

Pero... ¿Existe algún selector para poder hacer referencia a todas las letras?

Es decir, quiero aplicar ese estilo a todas las letras. Si el estilo lo aplico al párrafo no realiza lo que intento obviamente, necesito que aplique ese estilo a cada letra por separado.

Se que si le pongo a cada letra un span con la letra dentro podría realizarlo, pero si voy a insertar un texto desde php o js por ejemplo tendría que añadirle a cada letra el span y quiero evitar eso

2
  • Mmmm creo que no existe un selector para eso... hasta lo que se... pero puedes hacerlo con JS Commented el 14 abr. 2023 a las 18:29
  • Por cierto, ¿Por qué no mejor seleccionas a toda la etiqueta p? p { ... } Commented el 14 abr. 2023 a las 18:59

2 respuestas 2

1

Te dejo esta propuesta en la que se recorre cada caracter del párrafo y se envuelve dentro de un span con la clase que le da los estilos y al final se agregan los span estilizados al párrafo vacío.

El código está comentado. Si tienes dudas, deja un comentario.

window.addEventListener('load', function(){
  //Capturar el texto del párrafo
  let parrafo = document.getElementById("parrafo").innerHTML;
  //Capturar el párrafo vacío
  let estilizado = document.getElementById("estilizado");
  //Inicializar la variable vacía
  let estilo = '';
  //Recorrer cada caracter
  for (const caracter of parrafo) {
    //Si el caracter no es un espacio
    if(caracter != ' '){
      //Crear un span aplicando la calse que le dará los estilos
      estilo += `<span class="estilo">${caracter}</span>`;
    }
  }
  //Al final se pasan todos los caracteres con su respectivo span al párrafo vacío
  estilizado.innerHTML = estilo;
});
.estilo {
  margin-right: 10px;
  background-color: black;
  color: white;
  padding: 10px 20px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}
<p id="parrafo">Esto es un párrafo</p>
<p id="estilizado"></p>

0

Eso que dices nada más se puede hacer con JS, no hay ningún selector así en CSS creo...

Por ejemplo:

Ponemos un id a tu etiqueta.

<p id="miParrafo">Esto es un párrafo</p>
// Seleccionar el párrafo
const myParagraph = document.getElementById('miParrafo');

// Obtener el texto del párrafo y eliminar los espacios en blanco
const text = myParagraph.innerText.replace(/\s/g, '');

// Convertir el texto en un array de caracteres
const characters = text.split('');

// Crear un nuevo array con cada letra dentro de un elemento span
const wrappedCharacters = characters.map(character => {
  return `<span>${character}</span>`;
});

// Volver a unir los elementos en una cadena de texto y asignarla al párrafo
myParagraph.innerHTML = wrappedCharacters.join('');

Y en la clase de los estilos, envolvemos solo los caracteres del texto en un elemento span

#miParrafo span {
  margin-right: 10px;
  background-color: black;
  color: white;
  padding: 10px 20px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}

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.