Issue
I dont know why the selector :first-child working for 'p' element and NOT :last-child and the same happening for the following span element where :last-child works but not the :first-child. (I suppose that the default parent for all of them is the body element). I found that if I place any element following paragraph element it (p:last-child) doesn't work, even acts weirdly for the following elements(span), why is it not working when I m specifically telling it to select last/first child of the 'p' (or span) element of the parent (in this case the body)?
<html>
<head>
<style>
p:first-child {
background: red;
}
span:last-child {
background: red;
}
</style>
</head>
<body>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The second paragraph.</p>
<span>A..</span><span>B.. </span><span>C.. </span>
</body>
</html>
EDIT: I just found dat the SPEC for all these :first-of-type, last-of-type, first-child and :last-child says- "the selected element had to have a parent. Beginning with Selectors Level 4, this is no longer required", Which means there's a glitch in their spec. if they DONT need any parent, then it must work, even if they needed, they have one in my case (the body element). Firstly, as per SPEC, they don't need to be a child anymore, secondly, they are indeed children of the default body element. Hence, all these should work (relative to the parent body).
Solution
You fail to understand how those selectors are meant to work, and do work.
:first-child and :last-child are conditions which must match on their own. Preceding it with a selector like p or span just further constrains the list of elements already matched by :first-child and :last-child.
So p:first-child actually means Find all elements which are the first child elements of their parent; then from those found, give me only the p elements.
Answered By - connexo
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.