CSS selects the first child element under the parent element (:first-child)

Preface

I recently used :first-child in a project and it came to mind easily, yeah. Isn't this just selecting the first element?

It seems to be very useful, and I don't encounter any problems in my daily use. I naturally think that it will only select the first element under the parent element and have no effect on grandchildren and great-grandchildren elements. It turns out that I was wrong.

The first misunderstanding of E:first-child (it will only select one of the areas I specified, and will not traverse how many grandchildren or great-grandchildren elements there are)

<!DOCTYPE html>
<html>
<head>
<style>
body p:first-child
{
background-color:yellow;
}
</style>
</head>
<body>

<p>This paragraph is the first child of its parent element (body). </p>

<h1>Welcome to my homepage</h1>
<p>This paragraph is not the first child of its parent. </p>

<div>
<p>This paragraph is the first child of its parent (div). </p>
<p>This paragraph is not the first child of its parent. </p>
</div>

<p><b>Note:</b> For :first-child in IE8 and earlier browsers, the <!DOCTYPE> declaration is required. </p>

</body>
</html>

Will the above code really only work on one p tag?

This is the first common misunderstanding we have made, thinking that body p:first-child selects the first element.

In fact, as long as this p is the first one in its parent element in the body we selected, it will be selected.

The second misunderstanding of E:first-child (no matter how many brothers are in front of this E element, as long as I am the first E element, then I will take effect)

It is still the above code, but we added a font tag before the p tag in body and found that p is invalid.
The two examples above clearly tell us how to use this selector.

:first-child is a selector that selects the first child element of its parent element.

How to select only the sub-elements of a specified element? Not to mention how many grandchildren and great-grandchildren you have.

Child selector (>): can only select elements that are children of a certain element (direct children), excluding grandchildren, great-grandchildren, etc. Take the above code as an example, add > to try the effect

Sometimes the wrong selector is used but no error is reported. But wrong is wrong. There will always be a time to be discovered.
I'm glad that this mistake taught me something.

This is the end of this article about CSS selecting the first child element under the parent element (:first-child). For more relevant CSS first child element under the parent element, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

<<: SASS Style Programming Guide for CSS

>>: Example code for setting hot links and coordinate values for web images