The sibling selector selects elements of HTML tags in CSS using a combinator. The adjacent and general sibling selectors work on the CSS to style tags. The sibling selector is used to style tags and design given sibling elements. It is also used for user-interactive functions like forms, tables, lists, and other display information tabs.
The following two ways are used to select sibling elements in the CSS.
- Adjacent sibling selector
- General sibling selector.
CSS Adjacent Sibling Selector
The adjacent sibling selector in CSS is responsible for targeting the element immediately following a specific element. It is essential for the sibling selector to be contained within the same parent elements. Please note that this selector is incompatible with the inline style tag.
Syntax
The syntax below demonstrates the adjacent sibling selector.
<style>
Elements + elements {
/* write css properties for the sibling element */
}
div + div {
/* write css properties for the sibling element */
}
</style>
Examples
The upcoming instances demonstrate adjacent sibling selectors in CSS.
Example 1:
The illustration demonstrates the fundamental sibling selector of the adjacent element through CSS combinatory attributes.
<!DOCTYPE html>
<html>
<head>
<title> How to Select Sibling Element using CSS </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.main_div {
background-color: #F4F2F2;
height:310px;
border : 2px solid grey;
}
p + p{
font-size: 18px;
background-color: orange;
font-style:italic;
text-align:center;
}
</style>
</head>
<body>
<div class = "main_div">
<h3> How to Select Sibling Element using CSS </h3>
<h5> select adjacent sibling element using CSS </h5>
<div class = "flex-containers">
<p class = "clip"> First paragraph </p>
<p class = "clip2"> second paragraph </p>
<b class = "clip3"> First bold information </b>
<p class = "clip"> Third paragraph </p>
<p class = "clip2"> Fourth paragraph </p>
<p class = "clip2"> Fifth paragraph </p>
</div>
</div>
</body>
</html>
Output
The result displays the appearance of the neighboring elements on the HTML webpage.
Example 2:
The demonstration illustrates the adjacent sibling selector for the neighboring element in CSS. Elements can be targeted based on their class or ID identifiers.
<!DOCTYPE html>
<html>
<head>
<title> How to Select Sibling Element using CSS </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.main_div {
background-color: #F4F2F2;
height:310px;
border : 2px solid grey;
}
.clips + p{
font-size: 18px;
background-color: aqua;
font-style:italic;
text-align:center;
}
.clip3 + .clips{
font-size: 18px;
background-color: orange;
font-style:italic;
text-align:center;
}
</style>
</head>
<body>
<div class = "main_div">
<h3 class = "clip2"> How to Select Sibling Element using CSS </h3>
<h5 class = "clip2"> select the adjacent sibling element using CSS </h5>
<div class = "flex-containers">
<p class = "clip"> First paragraph </p>
<p class = "clip2"> second paragraph </p>
<b class = "clip3"> First bold information </b>
<p class = "clips"> Third paragraph </p>
<p class = "clips"> Fourth paragraph </p>
<p class = "clip2"> Fifth paragraph </p>
</div>
</div>
</body>
</html>
Output
The result displays the formatting of the adjacent elements on the HTML document.
Example 3:
The provided instance demonstrates the fundamental adjacent sibling element utilizing CSS attributes.
<!DOCTYPE html>
<html>
<head>
<title> How to Select Sibling Element using CSS </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.main_div {
background-color: #F4F2F2;
height:310px;
border : 2px solid grey;
}
th + th{
font-size: 18px;
background-color: aqua;
font-style:italic;
text-align:center;
}
td + td{
font-size: 18px;
background-color: orange;
text-align:center;
}
table {
width: 100%;
border: 2px solid black;
}
td, th {
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>
<div class = "main_div">
<h3> How to Select Sibling Element using CSS </h3>
<h5> select Adjacent sibling element using CSS </h5>
<div class = "flex-containers">
<table>
<thead>
<th> Student </th>
<th> Subject </th>
<th> Country </th>
</thead>
<tbody>
<tr>
<td> Radha </td>
<td> CSS </td>
<td> India </td>
</tr>
<tr>
<td> Adam </td>
<td> JavaScript </td>
<td> Mexico </td>
</tr>
<tr>
<td> Helen </td>
<td> Java </td>
<td> UK </td>
</tr>
<tr>
<td> Roland </td>
<td> React </td>
<td> Austria </td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Output
The subsequent result displays the sibling elements that are adjacent in the DOM tree.
CSS General Sibling Selector
The general sibling selector in CSS chooses an element within the same parent element as the specified element. Unlike the adjacent selector, this sibling selector does not require the elements to be next to each other but must share the same parent. It is important to note that this selector is not compatible with the inline style tag.
Syntax
The below syntax demonstrates the general sibling combinator in CSS.
<style>
Element1 ~ element2 {
/* write the css properties for the sibling element */
}
div + p {
/* write the css properties for the sibling element */
}
</style>
Examples
The samples demonstrate how to target a sibling element in CSS.
Example 1:
The given demonstration illustrates the fundamental concept of a general sibling element utilizing CSS attributes.
<!DOCTYPE html>
<html>
<head>
<title> How to Select Sibling Element using CSS </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.main_div {
background-color: #F4F2F2;
height:310px;
border : 2px solid grey;
}
b ~ p{
font-size: 18px;
background-color: aqua;
font-style:italic;
text-align:center;
}
</style>
</head>
<body>
<div class = "main_div">
<h3> How to Select Sibling Element using CSS </h3>
<h5> select General sibling element using CSS </h5>
<div class = "flex-containers">
<p class = "clip"> First paragraph </p>
<p class = "clip2"> second paragraph </p>
<b class = "clip3"> First bold information </b>
<p class = "clip"> Third paragraph </p>
<p class = "clip2"> Fourth paragraph </p>
<p class = "clip2"> Fifth paragraph </p>
</div>
</div>
</body>
</html>
Output:
The subsequent result displays the adjacent sibling elements.
Example 2:
The upcoming illustration demonstrates the fundamental general sibling selector in CSS properties.
<!DOCTYPE html>
<html>
<head>
<title> How to Select Sibling Element using CSS </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.main_div {
background-color: #F4F2F2;
height:310px;
border : 2px solid grey;
}
td ~ td{
font-size: 18px;
background-color: aqua;
font-style:italic;
text-align:center;
}
table {
width: 100%;
border: 2px solid black;
}
td, th {
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>
<div class = "main_div">
<h3> How to Select Sibling Element using CSS </h3>
<h5> select General sibling element using CSS </h5>
<div class = "flex-containers">
<table>
<tr>
<th> Student </th>
<th> Subject </th>
<th> Country </th>
</tr>
<tr>
<td> Radha </td>
<td> CSS </td>
<td> India </td>
</tr>
<tr>
<td> Adam </td>
<td> JavaScript </td>
<td> Mexico </td>
</tr>
<tr>
<td> Helen </td>
<td> Java </td>
<td> UK </td>
</tr>
<tr>
<td> Roland </td>
<td> React </td>
<td> Austria </td>
</tr>
</table>
</div>
</div>
</body>
</html>
Output:
The subsequent result displays the sibling elements that are adjacent in the HTML structure.
Example 3:
The example demonstrates the General sibling selector for selecting an adjacent element in CSS. Elements can be targeted by their class or ID identifiers.
<!DOCTYPE html>
<html>
<head>
<title> How to General Sibling Element using CSS </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.main_div {
background-color: #F4F2F2;
height:310px;
border : 2px solid grey;
}
.clips ~ p{
font-size: 18px;
background-color: aqua;
font-style:italic;
text-align:center;
}
.clip2 ~ .clips{
font-size: 18px;
background-color: orange;
font-style:italic;
text-align:center;
}
</style>
</head>
<body>
<div class = "main_div">
<h3 class = "clip2"> How to Select Sibling Element using CSS </h3>
<h5 class = "clip2"> select the adjacent sibling element using CSS </h5>
<div class = "flex-containers">
<p class = "clips"> First paragraph </p>
<p class = "clip2"> second paragraph </p>
<b class = "clip3"> First bold information </b>
<p class = "clips"> Third paragraph </p>
<p class = "clips"> Fourth paragraph </p>
<p class = "clip2"> Fifth paragraph </p>
</div>
</div>
</body>
</html>
Output:
The result displays the formatting of the adjacent elements on the HTML document.
Conclusion
The sibling element plays a key role in the styling of a webpage, drawing attention to the user. Utilizing CSS, we can target and style sibling elements to enhance user interaction and functionality, making the webpage more engaging.