What are the differences between first-of-type and first child in css

This article mainly introduces the difference between first-of-type and first child in css, which has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, let the editor take you to understand it.

(1) first-child

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

P:first-child: select no element, 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 div, but the third child element of div

(2): first-of-type

H2:first-of-type: H2 element is selected, because H2 element is the first H2 element of all H2 elements in div, in fact, there is only one child element of H2

P:first-of-type: the p element is selected, because the p element is the first p element of all p elements in div, and in fact there is only one child element of p

Span:first-of-type: the span element of id= "first" is selected, because there are two span elements in the div element, and we choose 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 first child element of an element type under the parent element (distinguishing element type).

": last-child" and ": last-of-type", "nth-child (n)" and ": nth-of-type (n)" can also be understood in the same way, which is no longer cumbersome here.

Thank you for reading this article carefully. I hope the article "what is the difference between first-of-type and first child in css" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!