CSS get 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 so we can style it or perform other operations on it. This article will detail how to get the first element with CSS and provide sample code.
Getting the First Element with the :first-child Selector
In CSS, we can use the :first-child selector to get the first child of a parent element. Here is a simple example code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Get First Element 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 element will change to red.
Getting the First Element with the :nth-child Selector
In addition to using the :first-child selector, we can also use the :nth-child selector to get the first child element of a parent element. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Get First Element Example</title>
<style>
div:nth-child(1) {
font-weight: bold;
}
</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 text to bold. After running this example code, the text of the first element will become bold.
Getting the First Element with the :first-of-type Selector
In addition to using the :first-child and :nth-child selectors, we can also use the :first-of-type selector to get the first child element of a specified type within a parent element. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Get First Element Example</title>
<style>
div:first-of-type {
background-color: lightblue;
}
</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 background color to light blue. After running this code, the background color of the first div element will change to light blue.
Getting the First Letter with the :first-letter Selector
In addition to getting the element itself, we can also use the :first-letter selector to get the first letter within an element. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Get First Element Example</title>
<style>
p::first-letter {
font-size: 24px;
color: red;
}
</style>
</head>
<body>
<p>Geek-docs.com is an online technical documentation website. </p>
</body>
</html>
Output:
In the above example, we use the :first-letter selector to select the first letter in a paragraph and set its font size to 24px and color to red. After running this example code, the first letter in the paragraph will be 24px in size and red.
Through the above example code, we can see how to use different selectors to get the first element or the first letter in a page and set their styles. In actual development, choose the appropriate selector to get the first element based on your specific needs to customize the page style.