0 points
Submitted by nickbrigham08
over 7 years

23/23 Why "body :" and not "p:"

It asks you to use the child as the selector in the previous exercises and now it wants you to use the parent? Why?

Answer 54e67cb951b887c2c9000047

1 vote

Permalink

In modern browsers, pseudo-classes are permissible as plain selectors, so,

:nth-child(4)

is a legitimate selector, and will probably work for you in this exercise. Let’s do a little review:

div p

The above is known as a descendant selector. It selects all P elements that are descendants of DIV elements. Now consider,

body :nth-child(4)

This too is a descendant selector that selects ALL elements that are the fourth child of their parent.

p :nth-child(4)

is selecting all elements that are the fourth child of their parent, that are descendants of a P element.

p:nth-child(4)

is not a descendant selector, but a direct pseudo-class of P elements. This selector matches every P element that is the fourth child of its parent.

<body>
  <p></p>
  <p></p>
  <p></p>
  <p>p:nth-child(4)</p>
  <p></p>
  <div>
    <p></p>
    <p></p>
    <p></p>
    <p>p:nth-child(4)</p>
    <p></p>
  </div>
</body>
points
Submitted by Roy
over 7 years

Answer 54e64ebd9113cb982500051b

0 votes

Permalink

I am having the same issue, it makes no sense to me.

points
Submitted by StuThurmond
over 7 years

Answer 550c7f1795e378b523000d1c

0 votes

Permalink

It is defined clearly, yet I have no idea what the difference means or why you would want the first version or the second version.

p :nth-child(4)
is selecting all elements that are the fourth child of their parent, that are descendants of a P element.

p:nth-child(4)
is not a descendant selector, but a direct pseudo-class of P elements. This selector matches every P element that is the fourth child of its parent.
points
Submitted by Jim McCall
over 7 years

3 comments

Roy over 7 years

The space is an important character in a selector. It represents a descendant selector. p :nth-child(4) is the fourth child of a P element. P elements cannot contain blocks, so in this case the child would be some inline component of the paragraph, like the fourth span, or fourth link, or just plain whatever is fourth. EM, STRONG, I, B are also examples of inline elements (the caps are my shorthand). p:nth-child(4) (no space) selects only a P, and then only if it is the fourth child of its parent element. Notice how we climb back down the tree one generation with this selector?

Jim McCall over 7 years

That helps with the definition or the framing of what the space does, but the next question is: with the space it becomes a descendant selector, and without the space it is a pseudo-class. Both are used in certain situations: (and this is my big question) what are the advantages of each choice? When I go back and read what I had quoted, they seem identical: the 4th child of the parent vs. every element that’s the 4th child of its parent.

Roy over 7 years

As a stand alone or as a descendant selector, a pseudo-class is still a plain selector. :nth-child(4) selects any fourth child anywhere in the document. element :nth-child(4) selects only those fourth child elements that descend from ‘element’ (element in this case is the ‘ancestor’ since this can reach down many generations. ‘element:nth-child(4)` can only select ‘element if it is the fourth child of its parent element (could be any parent). There is a distinction to be made here. We should not be thinking in terms of advantages as much as specifics and appropriate usage. They don’t compare when viewed from the advantage point of view. They are too different to be alternate choices. We use the selector that has the least amount of specificity needed to match its target element.