Even though it is a pseudo-class,
:nth-child() by itself is a plain selector. It can target any element in the DOM tree, to any depth the same way a type selector can.
It can select the first to the nth child element in all children, direct or descendant, regardless of type. Where it gets more specific is when it is a descendant of a type, or a child of a certain type.
targets only P-Nodes (paragraphs) that are the 6th child of their parent. Not only is it the sixth child, it is also a P element. If the parent has other containers with six or more children, P being the sixth, they will be in the scope of the selector, as will containers in those containers with six or more children, P being the sixth..
is nearly the equivalent of,
The latter specifically targets list items only, the former targets any sixth child in any container that is a descendant of the parent UL. That could be list items (LI), paragraphs, divisions (DIV), etc. But it does have one thing specific, unordered lists, only. Not OL (ordered lists). The latter will target list items in both lists.
As far as using a
body selector, that would only be targeting the body element, specifically, though some of the properties may be inherited by children,
font for instance.
font-size gets tricky, though, especially if the body has a size that is not 100%. That topic is for another day.
The above selector rule applies to the entire document. Any paragraph nested anywhere at any depth will be affected by this rule.
Say we want the first paragraph anywhere in the document to be indented, but not the others.
Trick question, what size of indent will be applied?
will target the first paragraph in all three levels (second child that's a P).
This selector rule could be used to target only the headlines. Their type is of no importance, just their placement in the tree.
If we wish to target only the div at the fourth level, then a child selector won't work. They are the second child at all levels. In this case, we would use a descendant selector:
div div div
If the parent had more than one div in it, then a child selector could be used to target only the first one (second child)
div div div:nth-child(2)
div div div:nth-of-type(1) /* first of type DIV */