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>
আউটপুট
এটি নিচের আউটপুট দেবে:
