CSS specifies the first element of the class

The first element of the CSS specified class

In

Using the :first-child Pseudo-Class Selector

In CSS, we can use the :first-child pseudo-class selector to select the first element of a specific class. This pseudo-class selector selects the first child of a parent element with the specified class, regardless of its type. When using the :first-child pseudo-class selector, we need to follow the following syntax:

.class:first-child {
/* Set styles */
}

Next, let’s look at an example. Suppose we have an HTML page with the following structure: HTML

<ul class="list"> 
<li>Apple</li> 
<li>Banana</li> 
<li>Cherry</li> 
</ul> 

We want to set a special style for the first element in this list, such as giving it a gray background color. We can achieve this using the following CSS code:

.list li:first-child {
background-color: lightgray;
}

In this example, we use the :first-child pseudo-class selector to select the first li element with the .list class and set its background color to gray. You can view the effect in your browser.

Using the :nth-of-type Pseudo-Class Selector

In addition to using the :first-child pseudo-class selector, we can also use the :nth-of-type() pseudo-class selector to select the first element with a specified class. Unlike :first-child, nth-of-type allows you to select elements of a specific type, not just by position. When using the :nth-of-type pseudo-class selector, follow this syntax:

.class:nth-of-type(n) {
/* Set style */
}

Where n is an expression representing a position, either a specific number or a keyword. If we want to select the first element, the value of n should be 1, meaning the first one.

Next, let’s look at an example. Suppose we have a HTML structure as follows:

<div class="content"> 
<p>Paragraph 1</p> 
<p>Paragraph 2</p> 
<p>Paragraph 3</p> 
</div> 

We want to set special styles for the first paragraph under the .content class, such as making the font bold. We can achieve this using the following CSS code:

.content p:nth-of-type(1) {
font-weight: bold; 
} 

In this example, we use :nth-of-type(1) to select the first p element with the .content class and make its font bold. We can view the effect in the browser.

Dynamic Style Setting with JavaScript

In some cases, we may need to use JavaScript to dynamically set the style of the first element. This can be very useful when dealing with complex interactive logic. We can use JavaScript to retrieve the first element with a specified class and set its style.

Here’s a sample code: Suppose we have a div element and we want to style its first child element using JavaScript:

<div id="container"> 
<p>First</p> 
<p>Second</p> 
<p>Third</p> 
</div> 

const container = document.getElementById('container'); 
const firstElement = container.firstElementChild; 
firstElement.style.color = 'blue'; 

In this example, we first get the container element using the getElementById method, and then use The firstElementChild property retrieves the first child element and ultimately sets its text color to blue.

Summary

Using the :first-child and :nth-of-type pseudo-class selectors and JavaScript, we can easily select and style the first element of a specified class.