CSS selector first div
CSS Selector: First Div
In CSS, we often need to select specific elements on a page to apply styles. Selecting the first Div is a common requirement. In this article, we’ll show you how to use CSS selectors to select and style the first Div on a page.
1. Selecting the First Div with the :first-of-type Selector
:first-of-type selectors select the first element of a type. We can use this selector to select the first div element in the page and add styles to it.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First div example</title>
<style>
div:first-of-type {
background-color: lightblue;
padding: 10px;
}
</style>
</head>
<body>
<div>First div</div>
<div>Second div</div>
<div>Third div</div>
</body>
</html>
Output:
In the example above, we use the :first-of-type selector to select the first div element on the page and add background color and padding styles to it. After running this example code, the background color of the first div element will change to light blue.
2. Selecting the First div Element with the :nth-of-type Selector
In addition to the :first-of-type selector, we can also use the :nth-of-type selector to select the first element of the same type. By setting the n parameter to 1, we can select the first div element.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First div example</title>
<style>
div:nth-of-type(1) {
background-color: lightgreen;
padding: 10px;
}
</style>
</head>
<body>
<div>First div</div>
<div>Second div</div>
<div>Third div</div>
</body>
</html>
Output:
In the above example, we use the :nth-of-type(1) selector to select the first div element on the page and add background color and padding styles to it. After running the sample code, the background color of the first div element will change to light green.
3. Select the first div element using the :first-child selector
In addition to the :first-of-type and :nth-of-type selectors, we can also use the :first-child selector to select the first child element under the same parent element. By setting the selector to div:first-child, we can select the first div element on the page.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First div example</title>
<style>
div:first-child {
background-color: lightcoral;
padding: 10px;
}
</style>
</head>
<body>
<div>First div</div>
<div>Second div</div>
<div>Third div</div>
</body>
</html>
Output:
In the example above, we use the :first-child selector to select the first div element on the page and add a background color and padding styles to it. After running this example code, the background color of the first div element will change to light coral.
4. Selecting the First Div Element with the :first-of-type Pseudo-Class Selector
In addition to selectors, we can also use pseudo-class selectors to select the first div element on the page. By setting the selector to :first-of-type, we can select the first div element on the page.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First div example</title>
<style>
div:first-of-type {
background-color: lightyellow;
padding: 10px;
}
</style>
</head>
<body>
<div>First div</div>
<div>Second div</div>
<div>Third div</div>
</body>
</html>
Output:
In the example above, we use the :first-of-type pseudo-class selector to select the first div element on the page and add a background color and padding styles to it. After running this example code, the background color of the first div element will change to light yellow.
5. Selecting the First Div Element and Applying Styles with JavaScript
In addition to CSS selectors, we can also use JavaScript to select the first div element on the page and apply styles to it. Use the document.querySelector('div') method to select the first div element and apply styles to it.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First div example</title>
<style>
#firstDiv {
background-color: lightblue;
padding: 10px;
}
</style>
</head>
<body>
<div id="firstDiv">First div</div>
<div>Second div</div>
<div>Third div</div>
<script>
document.querySelector('div').style.backgroundColor = 'lightgreen';
document.querySelector('div').style.padding = '10px';
</script>
</body>
</html>
Output:
In the above example, we use JavaScript to select the first div element on the page and add background color and padding styles to it. After running this example code, the background color of the first div element will change to light blue.
Through the above example code, we have detailed how to use CSS selectors and JavaScript selectors to select the first div element on the page and apply styles to it.