General Sibling Selectors in CSS

CSSWeb DevelopmentFront End Technology

The CSS general sibling selector is used to select all elements that follow the first element such that both are children of the same parent.

Syntax

The syntax for CSS general sibling selector is as follows

element ~ element {
   /*declarations*/
}

The following examples illustrate CSS general sibling selector −

Example

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
* {
   float: left;
   padding-left: 14px;
   list-style: none;
}
p ~ ul {
   box-shadow: inset 4px 0 3px lime;
}
</style>
</head>
<body>
<ul>
<li><img src="https://www.tutorialspoint.com/images/pl-sql.png"></li>
</ul>
<p>We provide learning tutorials, quizzes and video tutorials.</p>
<ul>
<li>Tutorials on databases and programming languages.</li>
<li>Quizzes to check knowledge of databases and languages.</li>
<li>Video Tutorials to easily understand the technologies.</li>
</ul>
<ul>
<li><img src="https://www.tutorialspoint.com/images/mongodb.png"></li>
<li><img src="https://www.tutorialspoint.com/images/db2.png"></li>
<li><img src="https://www.tutorialspoint.com/images/sql.png"></li>
</ul>
</body>
</html>

Output

This gives the following output −

Example

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
* {
   float: left;
   padding: 10px;
   list-style: none;
}
img ~ p {
   background-color: burlywood;
}
</style>
</head>
<body>
<p>This is demo text.</p>
<img src="https://www.tutorialspoint.com/big_data_analytics/images/big-data-analytics-mini-logo.jpg">
<p>Learn Big Data Analytics at no cost.</p>
</body>
</html>

Output

This gives the following output −

raja
Published on 09-Jan-2020 11:08:39
Advertisements