2

Trabajando con html/css me he encontrado con este problema, quiero cambiar el color del primer enlace, lo quiero hacer con nth-child(1) pero seleciona todos. ¿Qué tengo que poner para selecionar el primer link (1er enlace) en css?

<div class="links">
        <ul class="lc-checks">
                        <a href="#" target="_blank"><li><span class="lc-checks__feature ">1er enlace</span></li></a>
                        <a href="#" target="_blank"><li><span class="lc-checks__feature ">2do enlace</span></li></a>
                        <a href="#" target="_blank"><li><span class="lc-checks__feature ">3er enlace</span></li></a>
                    </ul>
    </div>

1 respuesta 1

3

La entrada y la lista no la has construido según la norma, los elementos

  • no van dentro de los , sino al revés.

    <div class="links">
        <ul class="lc-checks">  
            <li> <a href="#" target="_blank"><span class="lc-checks__feature ">1er enlace</span></li></a>
             <li><a href="#" target="_blank"><span class="lc-checks__feature ">2do enlace</span></li></a>
             <li> <a href="#" target="_blank"><span class="lc-checks__feature ">3er enlace</span></li></a>
        </ul>
    

    Luego el css que queires sería

    .links ul li:nth-child(1) a{
        color:red;
        font-weight:bold;
    }
    

    Espero que te sirva

  • 3
    • El problema es que el html no es mío, estoy usando una tool, es la siguiente: ogads.com , y por eso no puedo cambiarlo. ¿Habría manera de hacerlo con el html que está en la pregunta inicial? el 5 sep. 2021 a las 21:23
    • .links ul a:nth-child(1) li usando esto he podido conseguirlo, edita tu respuesta y la doy por válida para ayudar a más usuarios. Gracias! el 5 sep. 2021 a las 21:24
    • 1
      Si, efectivamente a:nth-child() funciona, pero el HTML que usas es sintácticamente incorrecto (aunque funcione, al menos en chrome) , por eso lo corregí en la respuesta. Si no puedes cambiarlo pues tendrás que usar la solución del a:nth-child() .
      – Juan
      el 5 sep. 2021 a las 21:52

    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.