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

The content of this article is about the difference between first-of-type and first child. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

#The above explanation may seem difficult to understand, and you need to combine it with examples to truly understand it.

<div>
    <h1></h1>
    <p></p>
    <span></span>
    <span></span>
</div>

(1): first-child

h1:first-child: The h1 element is selected because the h1 element is the first child element of the div.

p:first-child: No element can be selected because p is not the first child element of div, but the second child element of div.

span:first-child: No element can be selected because span is not the first child element of the div, but the third child element of the div;

(2): first- of-type

h1: first-of-type: The h1 element is selected because the h1 element is the first h1 element among all h1 elements in the div. In fact, there is only one child element of h1. ;

p: first-of-type: The p element is selected, because the p element is the first p element among all p elements in the div. In fact, there is only one child element of p;

span: first-of-type: The span element with id="first" is selected. Because there are two span elements in the div element, we select the first of the two.

Summary:

":first-child" selects the first child element under the parent element (regardless of element type), while ":first-of-type" selects the parent element The first child element of the next element type (distinguish between element types).

":last-child" and ":last-of-type", "nth-child(n)" and ":nth-of-type(n)" can also be understood in this way. No further explanation is required.

The above is a complete introduction to the difference between first-of-type and first child. If you want to know more about CSS3 tutorial, please pay attention to the PHP Chinese website.

The above is the detailed content of What is the difference between first-of-type and first child?. For more information, please follow other related articles on the PHP Chinese website!