Home/ Questions/Q 9302733
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T23:19:21+00:00

I was playing around with CSS selectors, when I ran into a weird situation.

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0