- Trending Categories
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
General Sibling Selectors in CSS
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
<!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
<!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 −
Updated on: 09-Jan-2020
719 Views
Advertisements