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.

Example:

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

This works here because the first <p> inside .home is also the first red paragraph.

However, CSS still cannot directly express “the first element with class red anywhere among siblings” in older selector patterns unless the HTML structure supports it. Selector choice depends on the actual DOM structure.

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>

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

No match happens, because the first child is <span>, not the first red paragraph.

Example 2: Use :first-of-type

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

This works for the given HTML because:

• the first <p> inside .home is <p class="red">first</p>
• that element has class red

Example 3: If the red element is truly the first child

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

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

Now it matches, because the first .red is also the first child.

Example 4: Modern CSS option with :first-child and direct children

If your structure is predictable, you can target the first child and require the class:

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

This still only works when .red is literally the first child of .home.

Example 5: Select the first paragraph, then require .red

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

This is often the best fit for markup like your example.

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.

3. For <p class="red">first</p>:

   • Its parent is .home
   • The first child of .home is <span>blah</span>
   • So this <p> is not :first-child

4. For <p class="red">second</p>:

   • It is also not the first child

5. Result:

   • nothing matches

Now try this CSS:

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

What changes

1. Find p elements inside .home with class red.
2. Check whether each one is the first-of-type among its siblings.
3. The first <p> inside .home is:

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

1. That element is both:

   • a <p>
   • class red
   • the first <p> of its type

2. Result:

   • only the first red paragraph gets the border

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:first-of-type {
  font-size: 1.1rem;
}

This is a common and reliable pattern.

Example: avoid unnecessary markup changes

If CSS cannot cleanly express “the first element with a given class” because of the structure, developers often:

• add a helper class like .first-red
• change the HTML structure
• use JavaScript when the selection is dynamic

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: 1px solid red;
}

This prevents accidental matches deeper in the tree.

4. Keep selectors maintainable

Developers often avoid overly clever CSS because HTML structure changes over time. A selector that depends on exact sibling order can break when another element is inserted.

5. Use JavaScript only when the logic is dynamic

If “first red” depends on user actions or generated content, JavaScript may be more practical than CSS alone.

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 :first-of-type

Use :first-of-type when you mean the first <p>, first <li>, first <div>, and so on.

p:first-of-type {
  color: red;
}

4. Using the wrong selector for nested elements

Broken assumption:

.home .red:first-child

This can match .red elements anywhere inside .home, not just direct children. If you mean direct children, use >:

.home > .red:first-child

5. Expecting CSS to select “first by class” in all cases

CSS is based on document structure, not arbitrary matching history. If you truly need “the first sibling that has class red” regardless of tag and earlier siblings, plain CSS may not be enough depending on browser support and structure.

6. Writing selectors that break when HTML changes

A small markup change like inserting a heading or icon can stop :first-child from matching. Prefer stable hooks when possible.

:first-child vs :first-of-type

Rule of thumb

• Use :first-child when the element must literally be first.
• Use :first-of-type when you mean the first element of a certain tag.

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 {
  border: 1px solid red;
}

When this fix works

It works when the first <p> inside .home is also the first red one.

When to use a class instead

If you need a guaranteed styling hook regardless of structure:

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

.first-red {
  border: 1px 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.

Is .home > .red:first-child better?

It is more specific because it limits the match to direct children, but it still requires the .red element to be 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.