All geek questions in one place

Can you select an html element or root node with nth-child?

I taught one of my students about the nth-child() pseudo-selector, and I asked him: can you select any possible HTML element with the nth-child pseudo-selector? His answer was negative, because you cannot select the root of the node, or rather, the html element.

I myself forgot this, because my answer in the past was yes. Is it possible to use nth-child() to select an html element? If so, how?

I would like to know, therefore, when I accept the final claims when teaching my students, they are truly final and do not lose sight of any possible cornerstone case.

thanks

+5
source share
2 answers

http://www.w3.org/TR/css3-selectors/#nth-child-pseudo :

"Nomenclature: the nth-child (a + b) pseudo-class is an element that has + b-1 children in front of it in the document tree, for any positive integer or null value n, and has a parent element ."

+4
source

nth-child(n) must select each item. It does, with the exception of the html element, which makes sense because html is the root element and has no parent. Having a parent is a requirement that CBroe has indicated.

 body { border: 5px solid black; margin: 10px; } html { border: 5px dashed red; } :nth-child(n) { border: 5px dotted blue; } 
 <body> <ul> <li>first</li> <li>second</li> <li>kevin</li> </ul> </body>
+1
source

Source: https://habr.com/ru/post/1233386/

More articles:


All Articles