CSS selects the first row of divs
CSS Select First Row of Div
In web development, we often need to set styles for elements on the page. Sometimes we want to apply special styles to only the first row of an element. To do this, we need to use CSS to select the first row of divs. In this article, we’ll detail how to achieve this using CSS.
1. Selecting the First Row of Divs Using the :first-line Pseudo-element
In CSS, we can use the :first-line pseudo-element to select the first row of an element. Here is a sample code:
<!DOCTYPE html>
<html>
<head>
<style>
div:first-line {
color: red;
}
</style>
</head>
<body>
<div>geek-docs.com Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</body>
</html>
Code Running Results:
In the example above, we use the :first-line pseudo-element to select the first line of the first div element and set the text color to red. After running the code, you will notice that the color of the first line of text changes to red.
2. Use :first-child and :first-of-type to select the first row of divs
In addition to using the :first-line pseudo-element, we can also combine :first-child and :first-of-type to select the first row of divs. Here is a sample code:
<!DOCTYPE html>
<html>
<head>
<style>
div:first-child {
color: blue;
}
div:first-of-type {
font-weight: bold;
}
</style>
</head>
<body>
<div>geek-docs.com Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div>geek-docs.com Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</div>
</body>
</html>
Code Running Results:
In the above example, we use :first-child to select the first div element and set the text color to blue. We also use :first-of-type to select the first div element and set the text to bold. After running the code, you will see that the text color of the first div element changes to blue and bold.
3. Use :nth-of-type to select the first row of divs
In addition to using the :first-line pseudo-element, we can also use :nth-of-type to select the first row of divs. Here is a sample code:
<!DOCTYPE html>
<html>
<head>
<style>
div:nth-of-type(1) {
text-transform: uppercase;
}
</style>
</head>
<body>
<div>geek-docs.com Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div>geek-docs.com Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</div>
</body>
</html>
Result of running the code:
In the above example, we use :nth-of-type(1) to select the first div element and convert the text to uppercase. After running the code, you will see that the text of the first div element becomes uppercase.
4. Use :first-of-type and :first-letter to select the first line of div
In addition to using the :first-line pseudo-element, we can also combine :first-of-type and :first-letter to select the first line of div. Here is a sample code:
<!DOCTYPE html>
<html>
<head>
<style>
div:first-of-type:first-letter {
font-size: 2em;
color: green;
}
</style>
</head>
<body>
<div>geek-docs.com Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div>geek-docs.com Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</div>
</body>
</html>
Result of running the code:
In the example above, we use :first-of-type:first-letter to select the first letter of the first div element, set the font size to 2em, and set the color to green. After running the code, you will see that the first letter of the first div element becomes larger and the color turns green.
5. Use the :first-of-type and ::before pseudo-elements to select the first row of divs
In addition to using the :first-line pseudo-element, we can also combine the :first-of-type and ::before pseudo-elements to select the first row of divs. Here is a sample code:
<!DOCTYPE html>
<html>
<head>
<style>
div:first-of-type::before {
content: "First Line: ";
font-weight: bold;
}
</style>
</head>
<body>
<div>geek-docs.com Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div>geek-docs.com Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</div>
</body>
</html>
Result of running the code:
In the example above, we use the :first-of-type::before pseudo-element to select the first div element, add the text “First Line: ” before it, and make it bold. After running the code, you will see the text “First Line: ” added before the first div element.
6. Use the :first-of-type and ::after pseudo-elements to select the first row of divs
In addition to using the :first-line pseudo-element, we can also combine the :first-of-type and ::after pseudo-elements to select the first row of divs. Here is a sample code:
<!DOCTYPE html>
<html>
<head>
<style>
div:first-of-type::after {
content: " - End of First Line";
font-style: italic;
}
</style>
</head>
<body>
<div>geek-docs.com Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div>geek-docs.com Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</div>
</body>
</html>
Result of running the code:
In the example above, we use the :first-of-type::after pseudo-element to select the first div element, add the text “- End of First Line” after it, and set the font to italic. After running the code, you will see the text “- End of First Line” added after the first div element.
7. Use :first-of-type with the :before and :after pseudo-elements to select the first row of divs
In addition to using the :first-line pseudo-element, we can also combine :first-of-type with the :before and :after pseudo-elements to select the first row of divs. Here is a sample code:
<!DOCTYPE html>
<html>
<head>
<style>
div:first-of-type::before {
content: "First Line: ";
font-weight: bold;
}
div:first-of-type::after {
content: " - End of First Line";
font-style: italic;
}
</style>
</head>
<body>
<div>geek-docs.com Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div>geek-docs.com Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</div>
</body>
</html>
Code Run Results:
In the example above, we use the :first-of-type::before and :first-of-type::after pseudo-elements to select the first div element, add the text “First Line: ” before it and set it to bold, and add the text “- End of First Line” after it and set it to italic. After running the code, you’ll see the text “First Line: ” added before the first div element and “- End of First Line” added after it.
8. Use the :first-of-type and :before and :after pseudo-elements to select the first line of divs and add quoted text before and after them.
In addition to using the :first-line pseudo-element, we can also combine the :first-of-type and :before and :after pseudo-elements to select the first line of divs and add quoted text before and after them. Here is a sample code:
<!DOCTYPE html>
<html>
<head>
<style>
div:first-of-type::before {
content: """;
}
div:first-of-type::after {
content: """;
}
</style>
</head>
<body>
<div>geek-docs.com Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div>geek-docs.com Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</div>
</body>
</html>
Result of running the code:
In the above example, we use the :first-of-type::before and :first-of-type::after pseudo-elements to select the first div element and add an opening quote before it and a closing quote after it. After running the code, you will see that the text of the first div element is wrapped in quotation marks.
9. Use the :first-of-type and :before and :after pseudo-elements to select the first row of divs with sequence numbers
In addition to using the :first-line pseudo-element, we can also combine :first-of-type with the :before and :after pseudo-elements to select the first row of divs and add sequence numbered text before and after them. Here is a sample code:
<!DOCTYPE html>
<html>
<head>
<style>
div:first-of-type::before {
counter-increment: section;
content: counter(section) ". ";
}
</style>
</head>
<body>
<div>geek-docs.com Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div>geek-docs.com Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</div>
</body>
</html>
Result of running the code:
In the above example, we use the :first-of-type::before pseudo-element to select the first div element and append sequentially numbered text to it, starting at 1 and increasing in number. After running the code, you’ll see the text in the first div element now has a sequential number.
10. Use the :first-of-type and :before and :after pseudo-elements to select the first row of divs with icons
In addition to using the :first-line pseudo-element, we can also combine :first-of-type with the :before and :after pseudo-elements to select the first row of divs and add text with icons before and after them. Here is a sample code:
<!DOCTYPE html>
<html>
<head>
<style>
div:first-of-type::before {
content: url('icon.png');
}
</style>
</head>
<body>
<div>geek-docs.com Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div>geek-docs.com Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</div>
</body>
</html>
Result of running the code:
In the above example, we use the :first-of-type::before pseudo-element to select the first div element and add an icon before it. Note that you need to replace icon.png with the actual icon path. After running the code, you will see the icon before the text of the first div element.
Through the above example code, we have detailed how to use CSS to select and style the first row of divs.