CSS find first child element

CSS Find First Child

In CSS, we often need to select the first child of an element for style settings. This is very common in web design, for example, styling the first menu item in a navigation bar differently from the others, or styling the first list item differently from the others.

Basic Syntax

To select the first child of an element, we can use the :first-child pseudo-class selector. This selector matches the first child of a parent element.

The following is a basic syntax example:

Parent:first-child {
/* Style settings */
}

Example

Suppose we have a simple navigation bar with three menu items. We want to set the background color of the first menu item to red and the background color of the other menu items to blue.

The HTML code is as follows:

<ul class="nav">
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
</ul>

We can use the following CSS code to achieve our requirements:

.nav li:first-child {
background-color: red;
}

.nav li {
background-color: blue;
}

In the above code, we first select the first child element of the li element under the .nav class, that is, the first menu item, and set its background color to red. Then, it selects all li elements with the .nav class and sets their background color to blue.

Compatibility Note

While the :first-child pseudo-class selector is well-supported in modern browsers, it may have compatibility issues in some older browsers. If compatibility with older browsers is required, consider using JavaScript to achieve the same effect.

Summary

Using the :first-child pseudo-class selector, we can easily select the first child of an element and set its style. In web design, this feature is very practical and can help us achieve certain style effects.