CSS selector selects the first sibling element
CSS Selector: Select First Sibling Element
During web development, you often encounter situations where you need to style the first sibling element of an element. We can use CSS selectors to achieve this requirement. This article will detail how to use CSS selectors to select the first sibling element and demonstrate some practical application scenarios.
What are sibling elements?
In HTML document structure, sibling elements refer to multiple elements under the same parent element. They are not nested within each other and are directly under the same parent element. In CSS, we can use the sibling selector (+) to select the first sibling of an element.
CSS Sibling Selectors
The CSS sibling selector is used to select the immediately following sibling element of an element. The syntax is as follows:
element + selector {
/* styles */
}
Where element is the element to be selected, and selector is the selector of the sibling element to be selected. The styles set in this way will only be applied to the first sibling element of element.
Example Demo
Next, we’ll use a simple example to demonstrate how to use CSS selectors to select the first sibling element.
Suppose you have the following HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Select the first sibling element</title>
<style>
div + p {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<div>This is the first sibling element</div>
<p>This paragraph will be selected</p>
<p>This paragraph will not be selected</p>
</body>
</html>
In the above code, we use the CSS selector div + p to select the first sibling element p of the div element and set its text color to red and font to bold.
Open the browser preview and you can see that the text color of the first p element changes to red and font to bold, while the style of the second p element remains unchanged.
This is the basic method of using CSS selectors to select the first sibling element. You can combine more style settings to beautify the page according to actual needs.
Application Scenarios
List Item Styling
In actual web development, list elements (such as <ul> and <ol>) are often used to display content. We can set specific styles by selecting the first list item to highlight its importance or distinguish it from other list items.
ul li + li {
border-top: 1px solid #ccc;
padding-top: 10px;
}
In this example, except for the first list item, a gray dividing line is added between the remaining list items, and top padding is increased to provide better visual separation between each list item.
Table Header Styles
In a table, the first row is usually displayed as the header. We can style the table header by selecting the first row in the table, making it stand out from the other rows.
table tr + tr {
background-color: #f4f4f4;
}
This CSS code sets the background color of each row after the first to a light gray, distinguishing it from the header.
Summary
This article introduced how to use CSS selectors to select the first sibling of an element and provided some practical examples. By flexibly applying CSS selectors, we can easily style page elements, making them more visually appealing.