CSS :first-child Selector

What is the :first-child Selector?

The :first-child selector in CSS is a powerful tool that allows you to target the very first child element of a parent element. This means if you apply styles to an element using this selector, it will only affect the first child element within its parent container. This can be particularly useful when you want to highlight or style the first item in a list, first paragraph in a section, or any first element among siblings.

Browser Compatibility

The :first-child selector is widely supported across modern web browsers. Here is a brief overview of browser compatibility:

Browser	Compatibility
Chrome	Supported
Firefox	Supported
Safari	Supported
Edge	Supported
Internet Explorer	Supported from version 7

Syntax

The basic syntax for the :first-child selector is as follows:

selector:first-child {
    property: value;
}

In this syntax, replace selector with the actual element you want to target, add any CSS properties and values you wish to apply, and the styles will be applied only to the first child of that parent element.

The :first-child Selector Explained

Example

Let’s examine a simple example to illustrate how the :first-child selector works in action:

<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Cherry</li>
</ul>

<style>
    li:first-child {
        color: red;
        font-weight: bold;
    }
</style>

In this example, the first list item, “Apple,” will be displayed in red and bold font because it is the first child of the <ul> element.

Matching the First Child

To understand how to effectively use the :first-child selector, consider how it matches the first child. It is essential to note that the :first-child works with elements that are specifically the first child of their parent. For instance:

<div>
    <p>First paragraph</p>
    <p>Second paragraph</p>
</div>

<style>
    p:first-child {
        font-style: italic;
    }
</style>

In this snippet, “First paragraph” will be displayed in italic font. However, if we added a <div> before the first <p>, the selection would change.

Difference Between :first-child and :nth-child

The :first-child selector is often compared with the :nth-child selector. Here’s how they differ:

Selector	Description
:first-child	Selects the very first child of a parent, regardless of type.
:nth-child(n)	Selects the nth child of a parent, based on a given argument (could be odd/even or specific number).

For example:

<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Cherry</li>
</ul>

<style>
    li:first-child {
        color: red;
    }
    li:nth-child(2) {
        color: blue;
    }
</style>

In this case, “Apple” will be red (first child), and “Banana” will be blue (second child).

Conclusion

Understanding the :first-child selector is essential for effective CSS styling, particularly when dealing with lists and hierarchical elements. By mastering this selector, you can create cleaner designs that draw attention to specific elements.

FAQ

Q: Can the :first-child selector be used on all HTML elements?
A: Yes, the :first-child selector can be used to select any element that is the first child of its parent, regardless of the element type.

Q: How does :first-child behave with empty elements?
A: If an element is empty and is the first child, the :first-child selector will still target it, but it may not have visible effects unless styles are applied.

Q: Is it possible to apply styles to the first child of a specific type?
A: Yes, you can combine the :first-child selector with element types, for example, ul li:first-child, which targets the first <li> within a <ul>.

Q: Can I use :first-child with pseudo-elements?
A: No, the :first-child selector applies only to regular elements, not pseudo-elements like ::before or ::after.