The First-Child Selector

Pseudo-classes and Pseudo-elements provide a means to target parts of a web page that don't have dedicated tags, but are easy to identify. For example, it's easy to identify the first letter of a paragraph, but since there isn't a dedicated tag for the first letter of a paragraph it can't be targeted using a simple selector.

Pseudo-Classes

I'll start with pseudo-classes, because they are more widely supported by browsers, and frequently used. The pseudo-classes are:

Pseudo-class	Category
`:first-child`	structural
`:focus`	dynamic (user-action)
`:link`	link
`:visited`	link
`:hover`	dynamic (user-action)
`:active`	dynamic (user-action)

Pseudo-classes allow you to target elements as if there were a virtual class assigned to it. Pseudo-classes are categorized as structural, link, or dynamic, depending on the behavior of the pseudo-class.

A structural pseudo-class permits selection based on extra information that lies in the document tree but cannot be represented by other simple or contextual selectors. Structural pseudo-classes are often referred to as static because once rendered, its appearance does not change.
Link pseudo-classes provide the means to distinguish unvisited and visited hyperlinks on a page.
Dynamic pseudo-classes, also known as user-action pseudo-classes, change the rendering of elements in response to user actions.

Just like a real class, a pseudo-class can provide context to a target element in a descendant selector.

First-child Selector

The :first-child pseudo-class is a structural pseudo-class. It allows the designer to specify a unique style for an element that is the first child element of another element.

General Syntax for the First-child Selector

element:first-child { declarations... }

This selector is not supported in Windows IE 6 or below.

The element in the :first-child selector is the element being targeted.

In this simple example ...

em:first-child { color: purple; }

... any EM tag that is the first child to any parent element will be purple. This rule will cast a wide net on EM tags in the document, since it's not very specific.

Like other classes and elements, you can specify ancestors to the :first-child selector to add specificity.

In the next example, the selector matches any P element that is the first child of a DIV element given the "intro" class. The rule suppresses indentation for the first paragraph of an "intro" DIV:

Example Style sheet

div#intro p:first-child { text-indent: 0; }

This selector would match the first P inside the DIV of the following markup...

<div class="intro">
   <p>The first P inside the note is targeted</p>
   <p>Any subsequent P inside the intro is not targeted</p>
</div>

...but the selector would not match the first P in the following fragment because the first P is not the first child of the DIV. In this case, the H2 is the first-child to the DIV:

<div class="intro">
   <h2>Introduction</h2>
   <p>
      The first P inside the introduction is not targeted 
      because it is not the first child of the DIV.
   </p>
   <p>Of course, this P would not be targeted in any case.</p>
</div>

In the example above, we targeted a block-level element in the selector. In the following example, we will target the EM inline element:

Example Style sheet

.example em:first-child {
   color: #F90;
   }

This rule adds specificity to the em:first-child selector. Rather than styling any instance where the EM tag is the first child to a parent element, the parent element must also have the "example" class assigned to it.

Example Markup

<p class="example">
  Here comes the first EM element which
  <em>is the <span>first EM child element</span> within the
  class</em> and should be orange. Now comes another EM tag that
  <em>should not display in orange</em> ... only the first
  EM child displays in orange!
</p>
 
<p>
  This paragraph
  <em>does not</em> have the "example" class assigned to it,
  so the <em>emphasized text</em> should not be orange. The
  first child EM does not display in orange.
</p>
 
<p class="example";>
  This is a different paragraph with the
  <em>example</em> class and
  <em>emphasized text</em>. Since this is a separate block
  element, the first EM child element within this paragraph
  will also be orange. The following EM tag
  <em>should <span>not be displayed</span> in orange</em>
  ... only the first EM child displays in orange!
</p>

Rendered Example

Here comes the first EM element which is the first EM child element within the class and should be orange. Now comes another EM tag that should not display in orange ... only the first EM child displays in orange!

This paragraph does not have the "example" class assigned to it, so the emphasized text should not be orange. The first child EM does not display in orange.

This is a different paragraph with the example class and emphasized text. Since this is a separate block element, the first EM child element within this paragraph will also be orange. The following EM tag should not be displayed in orange ... only the first EM child displays in orange!

Just like a real class, the :first-child pseudo-class can provide context in a descendant selector. To illustrate this, let's add a rule to our previous example style sheet.

Example Style sheet

.example em:first-child {
   color: #F90;
   background-color: inherit;
   }
 
.example em:first-child span {
   font-weight: bold;
   font-size: 1.2em;
   }

Here, we've added a rule that targets SPAN tags that are descendants of any EM that is the first child of an element with the "example" class.

Let's re-use the markup from above. Note that the first paragraph has a SPAN tag within the first EM tag, and the last paragraph has a SPAN tag within the third EM tag in the paragraph.

Here's the example markup rendered using our new style sheet. Note that the em:first-child span rule is applied in the first paragraph, but not the last paragrash, just as we intended!

Rendered Example

This paragraph does not have the "example" class assigned to it, so the emphasized text should not be orange. The first child EM does not display in orange.