CSS সাধারণ ভাইবোন নির্বাচক সকল উপাদান নির্বাচন করতে ব্যবহৃত হয় যা প্রথম উপাদান অনুসরণ করে যেমন উভয়ই একই পিতামাতার সন্তান।
সিনট্যাক্স
CSS সাধারণ ভাইবোন নির্বাচকের সিনট্যাক্স নিম্নরূপ
element ~ element {
/*declarations*/
} নিম্নলিখিত উদাহরণগুলি CSS সাধারণ ভাইবোন নির্বাচক -
কে চিত্রিত করে৷উদাহরণ
<!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> আউটপুট
এটি নিম্নলিখিত আউটপুট দেয় -
উদাহরণ
<!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> আউটপুট
এটি নিম্নলিখিত আউটপুট দেয় -
