Is the CSS ID selector with first-child pseudo syntax correct using a space?

Question

I've seen answers suggesting using first child pseudo selector using the following formats:

/* Type */
P:first-child {
   margin:0px;
}

/* Class */
.myClass:first-child {
   margin:0px;
}

/* ID */
#myDiv:first-child {
   margin:0px;
}

In my case I'm selecting by ID. I've seen only a few using an ID. In my code I can't get it to work unless I put a space in between the ID and pseudo-class like so:

#myDiv :first-child {
   margin:0px;
}

Is this correct?

Here is the code I'm working with:

<div id="richText59">
    <UL>
      <LI>
        <FONT FACE="Verdana" COLOR="#000000" LETTERSPACING="0" KERNING="1" style="font-size:12px">Bullet List</FONT>
      </LI>
    </UL>
</div>

<div id="RichText808">
    <P ALIGN="left">
      <FONT FACE="Verdana" COLOR="#000000" LETTERSPACING="0" KERNING="1" style="font-size:12px">
        <B>
          <I>Rich Text</I>
        </B>
      </FONT>
    </P>
    <P ALIGN="left">
      <FONT FACE="Verdana" COLOR="#000000" LETTERSPACING="0" KERNING="1" style="font-size:12px">
        <B>
          <I>paragraph two</I>
        </B>
      </FONT>
    </P>
</div>

CSS:

#RichText808  {
    position:absolute;
    top:107px;
    left:35px;
    width:240px;
    display:inline-block;
    height:166px;
    display:inline-block;
    margin-top:-0.2em;
    margin-top:0;
}

#richText59  {
    position:absolute;
    top:107px;
    left:335px;
    width:240px;
    display:inline-block;
    height:166px;
    display:inline-block;
    margin-top:-0.2em;
}

In the HTML markup above, the contents of the div will change. I don't control the contents. The problem is that the content of the div is pushed down by around 10px.

By using the first-child selector I am able to remove the margin that pushes the content down. So yes, I do have the ID of the container element but no control over the contents of that element.

Answer 1

Using a space (blank) between or not is a semantic difference, it controls on what set of elements that additional selector is actually applied on:

• #myDiv:first-child: no separating blank means you try to filter the set of elements with the id "myDiv". This obviously makes no sense but is semantically valid.

• #myDiv :first-child: a separating blank means you select out of all elements inside the selected div, so child elements. Note that this does not only match immediate children though, but also children further down the hierarchy.

• #myDiv > :first-child: a separating "greater than" (arrow) means you select out of all immediate child elements of the selected div. Sp this does not match elements further down the hierarchy.

Answer 2

#myDiv:first-child take effect only if #myDiv is the first child of his parent.

#myDiv :first-child points to all first children which are descendants of #myDiv.

Example:

#myDiv:first-child {
  padding: 20px;
  background: green;
}
#myDiv :first-child {
  background: red;
}

<div id="myDiv">
  <p>#1</p>
  <p>#2<span>#2-1</span><span>#2-2</span></p>
</div>

Answer 3

You want to select the first child of an element with a particular ID. To put it a different way, you want to select an element that is the first child, and has as an ancestor an element with a particular ID. The way to do that is

#id :first-child
   ↑              SPACE MEANS ANCESTOR/DESCENDANT RELATIONSHIP

with a space between the two.

In my code I can't get it to work unless I put a space in between the ID and pseudo-class like so:

Right. That's because that's what the space means. It means "descendant". In this case, it means "any descendant of #id which is a first-child". That's what you want.

#id:first-child

does not work, because it does not say what you want. It means "an element with the id of #id, which is also the first child. That's what it means when you run selectors together with no space. That's not what you want. That's why it doesn't work.

I've seen answers suggesting using first child pseudo selector using the following formats:

You can't blindly copy something without understanding what it means. The space between selectors means something very specific. It means the thing on the right of the space is a descendant of the thing on the left. In your case, the paragraph you want to remove margins from is a descendant of the element with the ID. Therefore, you need and want the space.

Part of the reason for your confusion might be that we rarely see pseudo-classes like :first-child all by themselves, without an ID or class or something in front of them, like span:first-child or .class:first-child. So you might wonder why :first-child here has an "extra" space in front of it. Actually, :first-child all by itself is a perfectly selector even with nothing else in front. If you prefer to write #id p:first-child that's OK, of course, but it's not necessary if you already know that the first child is a p. You need to write it as p:first-child only if you want to address elements that are both ps and the first child. The space here, to repeat myself, indicates a descendant relationship between the two different selectors #id and the :first-child.

See the relevant documentation on MDN here. To quote:

A descendant combinator — typically represented by a single space () character in the form of selector₁ selector₂ — combines two selectors such that elements matched by the second selector (selector₂) are selected if they have an ancestor element matching the first selector (selector₁). Selectors that utilize a descendant combinator are called descendant selectors.