CSS Get the first element
Getting the First Element with CSS
In front-end development, you often need to get the first element on a page. In CSS, we can use selectors to get the first element to achieve this. This article will detail how to use CSS to get the first element and provide relevant code examples.
Getting the First Element with the :first-child Selector
In CSS, we can use the :first-child selector to get the first child of an element. Here is a simple example code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First Child 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>
Output:
In the example above, we use the :first-child selector to select the first div element and set its text color to red. After running this code, the text color of the first div element will change to red.
Getting the First Element with the :first-of-type Selector
In addition to the :first-child selector, we can also use the :first-of-type selector to get the first child of an element of a specified type. Here is an example code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First of Type Example</title>
<style>
div:first-of-type {
font-weight: bold;
}
</style>
</head>
<body>
<div>First Element</div>
<p>Second Element</p>
<div>Third Element</div>
</body>
</html>
Output:
In the example above, we use the :first-of-type selector to select the first div element and set its text to bold. After running this example code, the text of the first div element will be bold.
Getting the first element with the :nth-child() selector
In addition to the two selectors mentioned above, we can also use the :nth-child() selector to get the first child element of an element. Here is an example code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Nth Child Example</title>
<style>
div:nth-child(1) {
background-color: lightblue;
}
</style>
</head>
<body>
<div>First Element</div>
<div>Second Element</div>
<div>Third Element</div>
</body>
</html>
Output:
In the above example, we use the :nth-child(1) selector to select the first div element and set its background color to light blue. After running the sample code, the background color of the first div element will change to light blue.
Get the First Element via JavaScript
In addition to using CSS selectors to get the first element, we can also use JavaScript to get the first element. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Example</title>
</head>
<body>
<div id="firstElement">First Element</div>
<div>Second Element</div>
<div>Third Element</div>
<script>
var firstElement = document.getElementById('firstElement'); firstElement.style.color = 'green';
</script>
</body>
</html>
Output:
In the above example, we use the JavaScript document.getElementById() method to get the first element on the page and set its text color to green. After running this example code, the text color of the first element on the page will change to green.
Through this article, we learned how to use CSS and JavaScript to get the first element on a page. Whether using CSS selectors or JavaScript methods, getting the first element is easy.