CSS selector selects the first element

CSS Selectors

CSS selectors are used to select elements on a web page. They can be used to select specific elements and apply styles to them. CSS selectors can select elements based on features such as tag names, class names, IDs, and attributes.

Common CSS selectors include:

Element selector: Selects elements with a specified tag name.
Class selector: Selects elements with a specified class name.
ID selector: Selects elements with a specified ID.
Descendant selector: Selects descendants of a specified element.
Child selector: Selects child elements of a specified element.
Adjacent sibling selector: Selects the element immediately following another element.
Universal selector: Selects all elements.

Selecting the first element

In CSS, to select the first element, you can use the :first-child pseudo-class selector. This pseudo-class selector selects the first child of an element.

The sample code is as follows:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>First Child Selector Example</title> 
<style> 
div:first-child { 
color: red; 
} 
</style> 
</head> 
<body> 
<div>First Element</div> 
<div>Second Element</div> 
<div>Third Element</div> 
</body> 
</html>

In the example above, we use the :first-child pseudo-class selector to select the first <div> element and apply a red text color to it. Running the above code, you can see that the text color of the first <div> element changes to red.

In addition to the :first-child pseudo-class selector, there is also the :first-of-type pseudo-class selector that selects the first element of a specific type at the same level. The sample code is as follows:

<!DOCTYPE html> 
<html lang="en"> 
<head> <meta charset="UTF-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>First of Type Selector Example</title> 
<style> 
div:first-of-type { 
font-weight: bold; 
} 
</style> 
</head> 
<body> 
<p>Paragraph 1</p> 
<div>First Element</div> 
<p>Paragraph 2</p> 
<div>Second Element</div> 
<p>Paragraph 3</p> 
<div>Third Element</div> 

</body> 

</html>

In the example above, we use the :first-of-type pseudo-class selector to select the first <div> element and apply a bold font style to it. Running the above code, you’ll see the text in the first <div> element appear bold.

Summary

Through this article, we’ve learned how to use selectors in CSS to select the first element. The :first-child pseudo-class selector can be used to select the first child element, while the :first-of-type pseudo-class selector can be used to select the first element of a specific type within an element at the same level. In web page layout and style design, choosing the right selector can effectively control the style of elements and achieve the desired effect.