CSS selects the first element

CSS Select First Element

In web development, we often need to use CSS to style elements on the page. Sometimes we need to select the first element and apply specific styles to it. This is especially common when designing page layouts or lists.

In CSS, we can use pseudo-class selectors to select the first element. Common pseudo-class selectors include :first-child and :first-of-type. Below, we’ll detail the usage of these two selectors and their differences.

Use the :first-child selector to select the first element

:first-child pseudo-class selector selects the first child of a parent element. For example, suppose we have the following HTML structure:

<ul> 
<li>First item</li> 
<li>Second item</li> 
<li>Third item</li> 
</ul> 

If we want to select the first item in this <ul> list and apply styles to it, we can use the :first-child selector. The style code is as follows:

ul li:first-child {
color: red;
}

The result is that the text of the first item turns red.

Using the :first-of-type selector to select the first element

The

:first-of-type pseudo-class selector selects the first element of a specific type within a parent element. Unlike :first-child, :first-of-type only considers the element’s type, not its position.

For example, suppose we have the following HTML structure:

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

If we want to select the first paragraph within this <div> and apply styles to it, we can use the :first-of-type selector. The style code is as follows:

div p:first-of-type { 
font-weight: bold; 
} 

The result is that the text in the first paragraph is bold.

Differences and Application Scenarios

The
• :first-child selector selects the first child of a parent element, regardless of type.

The

• :first-of-type selector selects the first element of a specific type within a parent element, regardless of position.

We can flexibly use these two selectors depending on the scenario. If we need to select the first child of a parent element regardless of type, we can use the :first-child selector; if we need to select the first element of a specific type within a parent element, we can use the :first-of-type selector.

In general, in front-end development, mastering CSS pseudo-class selectors is crucial for page styling. Proper use of the :first-child and :first-of-type selectors can make our pages more beautiful and easier to read.