CSS element first

In CSS, we often need to style various elements on a page. One common requirement is to set element styles. In this article, we’ll explore how to use CSS selectors to select and style the first element on a page.

1. Using the `:first-child` Selector

The :first-child selector is used to select the first child of an element. We can use it to select and style the first element on a page.

Here’s a simple example: We’ll add a red background color and white text color to the first <p> element on the page:

<!DOCTYPE html> 
<
<meta charset="UTF-8">
<title>First Child Example</title>
<style>
p:first-child {
background-color: red;
color: white;
}
</style>
</head>
<body>

<p>This is the first paragraph</p>
<p>This is the second paragraph</p>
<p>This is the third paragraph</p>

</body>
</html>

In the code above, we use the :first-child selector to select the first <p> element in the page and set its background color to red and text color to white. When the page loads, the first paragraph will display the corresponding styles.

2. Use the `:nth-child()` selector

In addition to the :first-child selector, you can also use the :nth-child() selector to select the first element on the page. The :nth-child() selector accepts parameters to specify the order of child elements to be selected. For example, :nth-child(1) selects the first child element, :nth-child(2) selects the second child element, and so on.

Here is an example where we use the :nth-child(1) selector to select the first <div> element in the page and add styles to it:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Nth Child Example</title> 
<style> 
div:nth-child(1) { 
background-color: blue; 
color: white; 
} 
</style> 
</head> 
<body> 

<div>This is the first div</div> 
<div>This is the second div</div> 
<div>This is the third div</div> 

</body> 
</html>

In the above code, we use the :nth-child(1) selector to select the first <div> element in the page and set a blue background color and white text color for it. After the page is loaded, the first <div> element will display the corresponding style.

3. Use JavaScript to dynamically select the first element

In addition to using CSS selectors, we can also use JavaScript to dynamically select the first element in the page and add styles to it. Here’s an example where we use JavaScript to select the first <h1> element on a page and add styles to it:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>JavaScript Example</title> 
<style> 
.highlighted { 
background-color: yellow; 
color: black; 
} 
</style> 
</head> 
<body> 

<h1>This is the first heading</h1> 
<h1>This is the second heading</h1> 
<h1>This is the third heading</h1> 

<script> 
var firstHeading = document.querySelector("h1"); 
firstHeading.classList.add("highlighted"); 
</script> 

</body> 
</html>

In the above example, we use the JavaScript querySelector method to select the first <h1> element on the page and add a style called highlighted to it. When the page loads, the first <h1> element will display a yellow background and black text.

Through the above example, we can see how to use CSS selectors and JavaScript to select and style the first element on a page. These methods can help us achieve more flexible and personalized page design.