How to Select the First Element With a Class in CSS

By the end of this page, you will understand how CSS pseudo-classes like :first-child actually work, why .red:first-child does not match the first .red in this HTML, and which selectors to use instead depending on your document structure.

CSS selectors do not read like plain English. A selector such as .red:first-child does not mean “the first element with class red.” It means:

• select an element with class red
• only if that same element is also the first child of its parent

In the example HTML, the first child inside .home is this element:

<span>blah</span>

That means the first <p class="red"> is not the first child of .home, because a <span> comes before it. So the selector does not match anything.

This matters because CSS structural pseudo-classes such as :first-child, :last-child, and :nth-child() depend on the element's position among all siblings, not just among elements with a specific class.

If you want “the first p.red” or “the first paragraph of its type,” you need a selector that matches that structure. In many cases, :first-of-type is closer to what you want.

Think of sibling elements like people standing in a line.

• :first-child means: this person must be at the very front of the line.
• .red:first-child means: this person wears a red badge and is also at the very front of the line.
• It does not mean: find the first person in the line who wears a red badge.

In your HTML, the <span> is standing at the front of the line. The first .red paragraph is only the second child overall, so it does not qualify for :first-child.

If you instead ask for p:first-of-type, you are saying:

• find the first person in line who is a p

That matches the first paragraph, even if a different tag appears before it.

Core syntax

selector:first-child
selector:first-of-type
selector:nth-child(n)
selector:nth-of-type(n)

What your original selector means

.home .red:first-child {
  border: 1px solid red;
}

This matches any .red element inside .home only if it is the first child of its parent.

Example 1: Why it fails

<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
</div>

Consider this HTML:

<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
</div>

And this CSS:

.home .red:first-child {
  border: 1px solid red;
}

How the browser evaluates it

1. Find elements inside .home that have class .red.

   • <p class="red">first</p>
   • <p class="red">second</p>

2. For each of those elements, check whether it is also :first-child.

This kind of selector logic shows up often in real interfaces.

Common scenarios

• Styling the first item in a list differently
• Adding spacing to all cards except the first one
• Highlighting the first error message in a form
• Styling the first article preview or notification
• Targeting the first row, paragraph, or heading in a content block

Example: first notification card

<div class="notifications">
  <div class="note important">Server restarted</div>
  <div class="note important">Backup complete</div>
</div>

.notifications .important:first-child {
  font-weight: bold;
}

This only works if the first .important element is literally the first child.

Example: first paragraph in an article

article p {
  : ;
}

In real projects, developers usually avoid fragile selectors when structure may change.

Common patterns

1. Prefer structure-aware selectors

If you know the element type:

.home p.red:first-of-type {
  border: 1px solid red;
}

This is clearer than relying on .red:first-child when another tag might appear first.

2. Add explicit classes for important styling hooks

<p class="red first-red">first</p>

.first-red {
  border: 1px solid red;
}

This is common in large codebases because it is easy to read and less likely to break.

3. Use direct child selectors when needed

.home > p.red:first-of-type {
  border:  solid red;
}

1. Thinking :first-child means “first matching element”

Broken expectation:

.red:first-child {
  color: red;
}

This does not mean “the first .red.” It means “a .red element that is also the first child.”

2. Forgetting that other element types count

Broken example:

<div>
  <span>before</span>
  <p class="red">hello</p>
</div>

p.red:first-child {
  color: red;
}

This fails because the <span> is the first child.

3. Confusing :first-child with

Quick reference

/* Element must literally be the first child */
.red:first-child

/* First <p> among siblings, and it must have class red */
p.red:first-of-type

/* Direct child only */
.home > p.red:first-of-type

Important rules

• .red:first-child means:
  • class is red
  • and the same element is the first child
• It does not mean:
  • first element with class red
• :first-of-type checks tag type, not class
• Other sibling elements still affect :first-child
• Use > if you only want direct children

Good fix for the shown HTML

.home p.red:first-of-type {
  :  solid red;
}

Why doesn't .red:first-child select the first red element?

Because :first-child means the element must be the very first child of its parent, not just the first one with that class.

What selector should I use instead?

For the HTML shown, use:

.home p.red:first-of-type

What is the difference between :first-child and :first-of-type?

• :first-child checks whether the element is first among all siblings.
• :first-of-type checks whether it is the first of its tag type, such as the first <p>.

Can CSS select the first element with a class regardless of tag?

Not reliably with simple classic selectors in all structures. CSS is structural, so the exact HTML layout matters.

Should I use JavaScript for this?

Only if the selection is dynamic or CSS cannot express the condition cleanly. In many cases, adding a dedicated class is simpler.

Why does adding a <span> break my selector?

Because :first-child depends on actual sibling order. If another element comes first, your target is no longer the first child.

• :last-child — useful for selecting the final sibling instead of the first.
• :nth-child() — useful when selecting a child by exact position.
• :nth-of-type() — useful when selecting the second or third element of a specific tag type.
• :first-of-type — closely related because it often solves this exact problem.
• Child combinator (>) — important when you want only direct children, not nested descendants.
• Descendant selector — relevant because .home .red matches any nested .red inside .home.
• CSS specificity — helpful when a correct selector still seems not to apply because another rule overrides it.
• Utility classes — often used in real projects to avoid fragile structural selectors.