I'm trying to select the content inside an HTML tag except its last two children.

This is what I did so far

main > *:nth-last-child(n + 3) {
  color: red;
}

<main>
  <p>Lorem 1</p>
  <p>Lorem 2</p>
  <p>Lorem 3</p>
  <p>Lorem 4</p>
  <p>Lorem 5</p>
</main>

I'm trying to select the content inside an HTML tag except its last two children.

This is what I did so far

main > *:nth-last-child(n + 3) {
  color: red;
}

<main>
  <p>Lorem 1</p>
  <p>Lorem 2</p>
  <p>Lorem 3</p>
  <p>Lorem 4</p>
  <p>Lorem 5</p>
</main>

Above code does exactly what it should do, but the weird thing is the following one.

I created a script which logs on the browser console the result of following expression

document.querySelector('main > *:nth-last-child(n + 3)')

I expected to get the main tag with all its children but the last two, but I get the first child instead.
you can find a code sandbox here.
What am I doing wrong?

• javascript
• css

Share Improve this question Follow edited Mar 6 at 15:02 Mister Jojo 22.6k66 gold badges2525 silver badges4444 bronze badges asked Mar 4 at 10:57 PyKKePyKKe 40522 silver badges1919 bronze badges 12

• Please add minimal reproducible example to your question so we can help you. Consider to read documentation about Css Selectors. P.S. your question is tagged as css but you post a javascript code..... – law_81 Commented Mar 4 at 11:03
• @law_81 I added more details. I tagged it as css because I'm using above js code just to test it out – PyKKe Commented Mar 4 at 11:11
• 1 I can't even access that external site you are referring to, my browser is giving SSL errors. Please provide a proper minimal reproducible example of the issue directly within the question! – C3roe Commented Mar 4 at 11:15
• 3 "What am I doing wrong?" - you are using querySelector, which has the explicit purpose to return at most one element, in a situation where you want to select multiple elements, which means you of course need to use querySelectorAll instead. – C3roe Commented Mar 4 at 12:24
• 1 "I thought I could retrieve the whole wrapper without its last two children" - what you are retrieving is a live reflection of the current DOM. You can not retrieve the wrapper with only some of its children. – C3roe Commented Mar 4 at 13:12

 |  Show 7 more comments

1 Answer 1

Sorted by: Reset to default 1

you are confusing querySelector() method and querySelectorAll()

document
  .querySelectorAll('main > *:nth-last-child(n + 3)')
  .forEach( e => console.log(e.textContent ))
  ;

main > *:nth-last-child(n + 3) {
  color: red;
}

<main>
  <p>Lorem 1</p>
  <p>Lorem 2</p>
  <p>Lorem 3</p>
  <p>Lorem 4</p>
  <p>Lorem 5</p>
</main>