Issue
I was playing around with CSS selectors, when I ran into a weird situation.
If I use :first-child pseudo-element I need to prepend it with a space for it to work, If I don't it will not work. However with :first-letter pseudo-element situation is reverse, it will work only if it is not prepended by space.
I find it quite inconsistent as those are both pseudo elements. Initially I thought it may be just IE10 issue, but I checked with Chrome and Firefox with the same results. Is there something I am missing? Is there a reason for this behavior?
Here, is the compact sample reproducing the issue:
<!DOCTYPE html>
<html>
<head>
<style>
* { color: red; }
#article1 :first-child { color: deepskyblue; }
article :last-child { color: darkmagenta; }
#firstLetter:first-letter { color: darkslateblue; }
#firstLine:first-line { color: darkslateblue; }
</style>
</head>
<body>
<article id="article1">
<div>E :first-child </div>
<div>E :last-child </div>
</article>
<div id="firstLetter">:first-letter</div>
<div id="firstLine">:first-line</div>
</body>
</html>
Solution
Your confusion comes from the fact that :first-child and :last-child are pseudo-classes, not pseudo-elements. Each of them mean the first and last child of its parent respectively, but the element you attach them to represents the child, not the parent. A pseudo-class is a description of a certain element, if you will, just like an ID selector describes an element with that ID or an attribute selector describes an element with that attribute. So, the selector E:first-child means E that is the first child of its parent — whatever that parent may be — but not the first child of E.
The selector #article1:first-child should match #article1 since it's the first child of body, but it will not match the div that is the first child of #article1. #article1 :first-child matches the div because, well, it's the first child whose parent happens to be #article1.
On the other hand, :first-letter and :first-line work because they match the first letter and first line of each element respectively. This is what is meant by a pseudo-element; a virtual element (not represented in the DOM) that's generated as a member of some other element.
Note that this doesn't mean you can or cannot use the space with one or the other. You can use any combinator with any pseudo-class or pseudo-element selector, or attach it to another chain of simple selectors. They just mean different things when used with or without a combinator, which is why you're seeing different results.
Another explanation of pseudo-classes versus pseudo-elements can be found here.
If you don't need to support IE8 and older, you should represent pseudo-elements using double colons to help you distinguish them from pseudo-classes, so ::first-letter and ::first-line instead of :first-letter and :first-line. This notation is introduced in the new Selectors module.
Answered By - BoltClock
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.