el sitio que estoy seleccionando se ve más o menos así
<div class="start-left"> ... <div class="news-post">...</div> <div class="news-post">...</div> <!-- want to get this one above --> <div class="news-post">...</div> <div class="news-post">...</div> <div class="news-post">...</div> <div class="news-post">...</div> ... </div>
intenté esto pero no funcionó ni en firefox ni en chrome
document.querySelector('.start-left div:nth-child(2)')
¿Es esto posible o necesito saber cómo lo estoy haciendo? Estoy usando titiritero para un webscraper y necesito poder presionar un enlace en una publicación de noticias específica, por ejemplo, la segunda
nth-child(n)
cuenta todos los elementos secundarios del elemento, independientemente del tipo de elemento (nombre de la etiqueta). Si hay otros elementos de diferente tipo antes de su elemento de destino, nth-child
no podrá encontrar el elemento correcto y puede devolver un valor nulo.
Sin embargo, el selector nth-of-type(n)
coincide con elementos en función de su posición entre hermanos del mismo tipo (nombre de etiqueta)
e ignora los elementos de un tipo diferente.
// nth-child(2) returns null because the 2nd element is not a div var wrongElement = document.querySelector('.start-left div:nth-child(2)'); // nth-of-type(2) filters using the type of element var correctElement = document.querySelector('.start-left div:nth-of-type(2)'); console.log('div:nth-child(2): ' + wrongElement); console.log('div:nth-of-type(2): ' + correctElement.outerHTML);
<div class="start-left"> <p class="news-post">...</p> <p class="news-post">Not this</p> <div class="news-post">...</div> <div class="news-post">This one</div> <!-- want to get this one above --> <div class="news-post">...</div> </div>
Puede usar su solución agregando la cantidad de elementos anteriores al selector, por ejemplo, nth-child(4)
, sin embargo, una solución más robusta es usar nth-of-type(2)
.