CSS গ্রুপিং সিলেক্টর একাধিক এলিমেন্ট সিলেক্ট করে সেগুলো একসাথে স্টাইল করতে ব্যবহৃত হয়। এটি কোড কমায় এবং প্রতিটি এলিমেন্টের জন্য আলাদা স্টাইল ডিক্লেয়ার করার অতিরিক্ত পরিশ্রম বাঁচায়। সিলেক্টরগুলো গ্রুপ করতে হলে প্রতিটি সিলেক্টর কমা দিয়ে আলাদা করা হয়।
সিনট্যাক্স
CSS গ্রুপিং সিলেক্টরের সিনট্যাক্স:
element, element { /*declarations*/ }
নিচের উদাহরণগুলো CSS গ্রুপিং সিলেক্টর বোঝায়:
উদাহরণ
<!DOCTYPE html> <html> <head> <style> article, p, img { display: block; margin: auto; text-align: center; border-bottom: double orange; } </style> </head> <body> <article>Demo Text</article> <p>This is demo text.</p> <br/> <img src="https://www.tutorialspoint.com/swing/images/swing.jpg"> </body> </html>
আউটপুট
এটি নিচের আউটপুট দেবে:
উদাহরণ
<!DOCTYPE html> <html> <head> <style> div::after,p::after{ content: "Demo text"; margin: 4px; box-shadow: inset 0 0 4px darkorange; } </style> </head> <body> <div></div> <p>This is example text.</p> </body> </html>
আউটপুট
এটি নিচের আউটপুট দেবে:
