1

Me puse a practicar los selectors de QuerySelector. El problema es que no sé en qué radica el problema. Tengo mi HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <p id="hello">I am a paragraph</p>
    <p id="hello">I am2 another paragraph</p>
    <p id="hello">I am3 another paragraph</p>
    <p id="hello">I am 4another paragraph</p>
    <p id="hello">I am 5another paragraph</p>
    <a href="https://awesomeplace.com">Hey I am a link</a>
    <a href="https://anotherplace.com">I am another link</a>
    <script type="module" src="assets/libs/js/functions/funtions.js"></script>
</body>

</html>

Y estaba intentando usar la forma simple con el querySelector, pero me marca como Nulo en vez de lanzarme el último

document.querySelector("p:last-child");

Y lo demás es mi intento para no aburrirme:

var g = {
    $: (e, set = document) => {
        return set.querySelector(e);
    },
    $$: (e, set = document) => {
        return set.querySelectorAll(e);
    },
    id: (e, set = document) => {
        return set.querySelector('#' + e);
    },
    allId: (e, set = document) => {
        return set.querySelectorAll('#' + e);
    },
    lastId: (e, set = document) => {
        return set.querySelector('#hello:last-child');
    },
}
3
  • intentaste con nth-last-child en vez de last-child?, ahora que Aprendiz ha comprobado que efectivamente se pueden seleccionar elementos apartir de pseudoselectores, deberias mirar si puedes obtenerlos usando nth-last-child, talvez de esa manera no requieras eliminar o añadir elementos para poder seleccionar el ultimo parrafo.
    – Layer
    Commented el 6 dic. 2019 a las 3:39
  • @Riven Nel carnal, me manda esto. SyntaxError: '#hello:nth-last-child' is not a valid selector Commented el 6 dic. 2019 a las 3:42
  • creo que ese solo sirve con elementos html, no ids ni clases etc, lo habia visto en alguna parte, pero se que solo sirve con elementos html en si, es decir p, span, h1, etc.
    – Layer
    Commented el 6 dic. 2019 a las 3:43

2 respuestas 2

2

Yo recuperaría el último elemento de este modo:

let app = document.querySelector(".hello:nth-child(n+5)").textContent;
console.log(app)
  • Sustituye el uso de id por class ya que el primero es para un elemento único mientras que el segundo es para identificar a múltiples elementos
  • Obtengo con querySelector el elemento que tiene la clase hello
  • Con ayuda de nth-child y la sintaxis de n+posicion avanzo hasta el 5to elemento párrafo que tiene la clase hello
  • Para mostrar el texto que contiene tu etiqueta párrafo uso su propiedad textContent
  • Valiéndonos de la clase que todos tienen en común entonces deberiamos aplicar este sintaxis .hello:nth-child(n+5)

¿Pero por qué no funciona?

Cuando haces uso de last-child debes tener en cuenta que:

  • Los elementos deben estar contenidos dentro de una etiqueta padre, que pudiera ser un div
  • Todos incluidos los enlaces son hermanos por lo cual no se aplica la regla como lo deseas
  • Prueba hacer esto: Envuelve todos los p sin considerar los enlaces y obtendrás el valor deseado

Propuesta

    <!DOCTYPE html>
    <html lang="en">
    <style>
      .hello:nth-child(n+5) {
        color: red;
      }  
    </style>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    
    <body>
    <div>
        <p class="hello">I am a paragraph</p>
        <p class="hello">I am2 another paragraph</p>
        <p class="hello">I am3 another paragraph</p>
        <p class="hello">I am 4another paragraph</p>
        <p class="hello">I am 5another paragraph</p>
        <a href="">1</a>
        <a href="">2</a>
    </div>
    <script>
    let app = document.querySelector(".hello:nth-child(n+5)");
    console.log(app.textContent)
    </script>
    </body>
    
    </html>

4
  • No solucionó el problema pero es bastante informativo :3 Commented el 6 dic. 2019 a las 3:44
  • @PadrónRocha por favor si la respuesta no es la solución entonces no la marques como aceptada, ya que esto puede entonces al no ser la solución una confusión a quien visite esta publicación, aunque recomendaría cheques el snippet que agregué
    – user128299
    Commented el 6 dic. 2019 a las 3:46
  • Es que tienes un punto y se me hace excelente, pero me condunde que en páginas como dev.to/neutrino2211/using-css-selectors-in-javascript-3hlm diga que se puede y nada ;n; Jajajajaja. Pero tiene sentido lo que mencionas de que deben estar dentro de una etiqueta padre Y de hecho ya que lo probé dentro de un div, funciona Jajajaja, igual la marcaré como respuesta, aunque creo que para términos generales funciona el var elements = document.querySelectorAll("p"); var ultimo = elements[elements.length - 1]; Commented el 6 dic. 2019 a las 3:51
  • Aunque creo que igual funciona la que está abajo, de document.querySelector("p:last-of-type"); Es que estaba probando otras cosas al mismo tiempo, podrías agregarlo si quieres XD Commented el 6 dic. 2019 a las 3:54
2

Creo que estas confundiendo un poco sintaxis css con javascript, pero no estoy seguro, pero puedes obtenerlo con solo preguntando por p con eso obtienes una lista de todos los hijos y por el indice llegas al ultimo nodo.

var elements = document.querySelectorAll("p");
var ultimo = elements[elements.length - 1];
console.log(ultimo);
<body>
  <p id="hello">I am a paragraph</p>
  <p id="hello">I am2 another paragraph</p>
  <p id="hello">I am3 another paragraph</p>
  <p id="hello">I am 4another paragraph</p>
  <p id="hello">I am 5another paragraph</p>
  <a href="https://awesomeplace.com">Hey I am a link</a>
  <a href="https://anotherplace.com">I am another link</a>
  <script type="module" src="assets/libs/js/functions/funtions.js"></script>
</body>

y esta seria otra manera:

document.querySelector("p:last-of-type")
4

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.