0

Estoy tratando de cambiar el color de fondo de la selección del pseudoelemento first-letter, sin embargo el color de fondo solo se aplica al resto de elementos y no surge efecto en first-letter. Mi código es el siguiente:

</head>
<style>
    p::first-letter{
        font-size: 2rem;
    }

    *::selection{
        background: red;
        /*El background red funciona con todo lo demas correctamente, pero con el pseudoelemento no.*/
    }
    /*Esto tampoco cambia nada:*/
    p::selection::first-letter{
        background: red;
    }
    p::first-letter::selection{
        background: red;
    }
</style>
<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime dolorum nemo, molestias sapiente quis similique quod quidem odio dolores quia a nihil eos incidunt velit porro! Impedit ab adipisci, corporis?</p>
</body>
</html>

Este problema lo tengo con la mayoría de los navegadores, sin embargo con Firefox Developer Edition no esta ese problema (no lo he probado con Firefox normal y con algunos otros navegadores).
¿Alguien sabe como podría hacer que el color de fondo de la selección también se aplique a ese pseudoelemento?

6
  • Que pasa si cambias :: por : ? el 19 feb. 2020 a las 5:20
  • @JonathanOrta pues que dobles 2 puntos son para pseudoelementos y una sola pareja de puntos son para pseudoclases
    – BetaM
    el 19 feb. 2020 a las 5:25
  • Este código p::first-letter{ background-color: red; font-size: 2rem; } funciona perfecto para cambiar el color de fondo donde aparece la letra L
    – BetaM
    el 19 feb. 2020 a las 5:29
  • @Aprendiz Si, pero solo que surja efecto cuando lo selecciono. Ya que el color de fondo de la selección de la L se queda por el de defecto (Azul)
    – jesjack
    el 19 feb. 2020 a las 5:29
  • Seleccionar? cuando le haces hover, cuando le haces click? @jesjack
    – BetaM
    el 19 feb. 2020 a las 5:30

1 respuesta 1

1

Lo que solicitas no es posible, incluso la propiedad selection no esta dentro del estándar de CSS

Un fagmento obtenido de: https://developer.mozilla.org/es/docs/Web/CSS/::selection

Sólo un pequeño subconjunto de propiedades CSS pueden ser usadas en una regla ::selection en el selector de: color, background, background-color y text-shadow. Nótese que, en particular, background-image es ignorado, como cualquier otra propiedad.

Lastimosamente, si tendrias que encerrar en un span u otra etiqueta la letra a resalta

p::selection{color:red;}
span::selection{color:green;font-weight:800}
i::selection{color:blue;font-size:50px;font-style:normal}
<p>Lorem ipsum <span>D</span>olor sit amet, consectetur adipisicing elit. <i>M</i>agnam animi qui illum adipisci eos, delectus amet? Iste doloremque, deserunt maiores. Magnam suscipit fugit, totam quasi vitae repellendus molestiae nulla similique in, illum natus? Nisi vel ab molestias quod laboriosam minima laborum earum cumque quibusdam sint. Iure error explicabo delectus sint</p>

Como puedes ver font-weight y font-style son ignorados

3
  • Entonces ¿debería considerar la opción de utilizar un span encerrando la letra primera del párrafo en lugar de first-letter?
    – jesjack
    el 19 feb. 2020 a las 6:10
  • Lastimosamente si, hay que recurrir a alguna otra artimaña como bien dices un <span> o un <i>, edite para agregarte ejemplo de como iria el 19 feb. 2020 a las 6:49
  • Para completar la respuesta añadiría que lo que desea el usuario no es posible porque un mismo selector no puede usar dos pseudo-elementos a la vez (::first-letter y ::selection en este caso) developer.mozilla.org/es/docs/Web/CSS/Pseudoelementos
    – phpMyGuel
    el 19 feb. 2020 a las 8:24

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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