Mitunter soll das erste Element eines HTML-Konstrukts per CSS speziell gestaltet werden, z.B. was dessen Außenabstände angeht. Diese Anforderung gibt es in zwei Ausprägungen:

1. Das zu behandelnde Element ist das erste Element, das dem Bezugselement folgt.

2. Das zu behandelnde Element ist das erste Element, das dem Bezugselement untergeordnet ist.

Diese beiden Element-Anordnungen erfordern unterschiedliche CSS-Selektoren.

1. Element folgt auf Bezugselement

<X>...</X>
<Y>
  ...
</Y>
...

Der CSS-Selektor lautet:

X + * {
    ...
}

Bezugselement ist X. Der Selektor + selektiert das unmittelbar folgende Element. Der Universelle Selektor * füllt hier syntaktisch die zweite Argumentposition des Selektors und nimmt keine weitere Einschränkung vor.

Beispiel: Jedes erste Element nach einer <h1>-Überschrift soll einen oberen Außenabstand von 0.5em erhalten:

h1 + * {
    margin-top: 0.5em;
}

2. Element ist Bezugselement untergeordnet

<X>
  <Y>
    ...
  </Y>
</X>

Der CSS-Selektor lautet:

X > *:first-child {
    ...
}

Bezugselement ist X. Der Selektor > selektiert alle Elemente, die dem Bezugselement direkt untergeordnet sind. Die Pseudoklasse *:first-child schränkt diese Menge auf das erste Kindelement ein (der Stern kann auch weggelassen werden).

Beispiel: Jedes erste Unterelement <Y> eines <dd>-Definitionsabschnitts soll keinen oberen Außenabstand besitzen, sondern direkt an den Definitionsterminus <dt> anschließen:

HTML:

<dl>
  <dt>...</dt>
  <dd>
    <Y>
      ...
    </Y>
  </dd>
  ...
</dl>

CSS:

dd > *:first-child {
    margin-top: 0;
}