Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Selecting Sibling Elements with CSS
To select sibling elements with CSS, we can use the adjacent or the general sibling selectors. Let us understand them one by one with example. Both of them allows selecting sibling elements with HTML and CSS.
Adjacent sibling selector
Use the adjacent sibling selector (+), if we want to match the element which occurs immediately after the first selector. Here, both selectors are children of the same parent element.
The syntax of the CSS adjacent sibling combinator is as follows −
Selector + Selector{
attribute: /*value*/
}
The following example illustrate CSS adjacent combinator property. Here, the div + p will select and style the first <p> element placed immediately after <div> elements −
div + p {
font-size: 1.2em;
font-weight: bold;
background: powderblue;
}
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
#parent {
display: flex;
margin: 2%;
padding: 2%;
box-shadow: inset 0 0 24px cyan;
justify-content: space-around;
}
div + p {
font-size: 1.2em;
font-weight: bold;
background: powderblue;
}
section {
box-shadow: 0 0 3px rgba(0,0,0,0.8);
}
</style>
</head>
<body>
<div id="parent">
<img src="https://www.tutorialspoint.com/cprogramming/images/c-mini-logo.jpg" />
<div>
<p>Check this</p>
<section>
<p>Some text in section</p>
</section>
<span>hello</span>
</div>
<p>Selected</p>
</div>
</body>
</html>
General sibling selector
If we want to select siblings of the same parent irrespective of the position of the second selected element, we use the CSS general sibling combinator.
The syntax of the CSS general sibling combinator is as follows −
Selector ~ Selector{
attribute: /*value*/
}
The following example illustrate CSS general sibling combinator property. This selects every <p> element that is preceded by a <section> element −
section ~ p {
text-align: center;
font-size: 1.2em;
font-weight: bold;
background: lavender;
}
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
#parent {
display: flex;
margin: 2%;
padding: 2%;
background: thistle;
justify-content: space-between;
}
section ~ p {
text-align: center;
font-size: 1.2em;
font-weight: bold;
background: lavender;
}
</style>
</head>
<body>
<div id="parent">
<img src="https://www.tutorialspoint.com/java/images/java-mini-logo.jpg" />
<div>
<p>Random text 1</p>
<section>
<p>Some text in section</p>
</section>
<span>hello</span>
<p>Selected</p>
</div>
<img src="https://www.tutorialspoint.com/cprogramming/images/c-mini-logo.jpg" />
</div>
</body>
</html>
3K+ Views
