CSS সিলেক্টর ব্যবহার করে আমরা আমাদের পছন্দ অনুযায়ী নির্দিষ্ট এলিমেন্ট স্টাইল করতে পারি। HTML DOM-এ এলিমেন্ট সিলেক্ট করার বিভিন্ন পদ্ধতি রয়েছে।
সিনট্যাক্স
CSS সিলেক্টরদের সিনট্যাক্স নিম্নরূপ:
Selector { /*ঘোষণা*/ }
নিচের উদাহরণগুলো এলিমেন্ট স্টাইল করার জন্য CSS সিলেক্টর উদাহরণ দেয়:
উদাহরণ
<!DOCTYPE html> <html> <head> <style> #one { filter: invert(85%); } </style> </head> <body> <img id="one" src="https://www.tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg"> <img src="https://www.tutorialspoint.com/plsql/images/plsql-mini-logo.jpg"> </body> </html>
আউটপুট
এটি নিচের আউটপুট দেয়:
আরেকটি উদাহরণ
<!DOCTYPE html> <html> <head> <style> div, p { margin: 4px; float: left; height: 200px; width: 300px; box-shadow: inset 0 2px 4px olive; background-image: url("https://www.tutorialspoint.com/sas/images/sas-mini-logo.jpg"); } p { background-image: url("https://www.tutorialspoint.com/qlikview/images/qlikview-mini-logo.jpg"); background-position: 50% 50%; color: black; } </style> </head> <body> <h2>Learning Tutorials</h2> <div></div> <p>Tutorials</p> </body> </html>
আউটপুট
এটি নিচের আউটপুট দেয়:
