trying to use query selector to select a specific child in a html document

Question

site i am selecting from looks roughly like this

<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>

tried this but didnt work on either firefox or chrome

document.querySelector('.start-left div:nth-child(2)')

is this even possible or do i need to rething how i am doing this? I am using puppeteer for a webscraper and need to be able to press a link in a specific news post, e.g the second one

you should use `querySelectorAll`. See this https://stackoverflow.com/a/41848760/13460667 — Rajan, Jan 30 '22 at 18:26
This worked for me on Chrome. Are you getting any kind of error message? — Katharine Osborne, Jan 30 '22 at 18:26
This works. Are you placing the code after the DOM, or using `defer`? — Andy, Jan 30 '22 at 18:28
@KatharineOsborne it just returns null when trying it in a chrome session and on puppeteer it stops it as it cant find anything — Nimstad, Jan 30 '22 at 18:41
Pretty sure it was just me bieng stupid, there were two other elements above the children that i failed to mention, adding two to the selector fixed the problem. Sorry for any inconveniences — Nimstad, Jan 30 '22 at 18:49

score 1 · Accepted Answer · answered Jan 30 '22 at 19:05

nth-child(n) counts all children of the element, regardless of the type of element (tag name). If there are other elements of different type coming before your target element nth-child will fail to find the correct element and may return null.

However, the selector nth-of-type(n)

matches elements based on their position among siblings of the same type (tag name)

and ignores elements of a different type.

// 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>

You could use your work-around by adding the number of preceding elements to the selector, eg nth-child(4), however, a more robust solution is to use nth-of-type(2).

trying to use query selector to select a specific child in a html document

1 Answers1