CSS চাইল্ড কম্বিনেটর একটি পেরেন্ট এলিমেন্টের সব চাইল্ড এলিমেন্ট সিলেক্ট করতে ব্যবহৃত হয়।
CSS চাইল্ড কম্বিনেটরের সিনট্যাক্স নিচের মতো −
Selector > Selector { attribute: /*value*/ }
CSS ডিসেন্ডেন্ট কম্বিনেটর একটি পেরেন্ট এলিমেন্টের সব ডিসেন্ডেন্ট সিলেক্ট করতে ব্যবহৃত হয়।
CSS ডিসেন্ডেন্ট কম্বিনেটরের সিনট্যাক্স নিচের মতো −
Selector Selector { attribute: /*value*/ }
উদাহরণ
নিচের উদাহরণগুলো CSS চাইল্ড এবং ডিসেন্ডেন্ট কম্বিনেটর প্রদর্শন করে।
<!DOCTYPE html> <html> <head> <style> article > * { text-align: center; border: 10px groove tomato; } ::first-line { box-shadow: inset 0 0 7px cornflowerblue; } </style> </head> <body> <article> <h2>Donec rutrum a erat vitae interdum. </h2> <p>Duis consequat aliquet leo, quis aliquam ex vehicula in. Vivamus placerat tincidunt hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque semper ex eget nulla consectetur varius.</p> <img src="https://images.unsplash.com/photo-1612840666989- a16302e84978?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=120&ixlib=rb1.2.1&q=80&w=120" /> </article> </body> </html>
আউটপুট
এটি নিচের ফলাফল দেবে −
উদাহরণ
<!DOCTYPE html> <html> <head> <style> body > * { margin: 20px; } article p { font-size: 24px; box-shadow: -10px 1px 0 rgba(12,43,180, 0.6); } </style> </head> <body> <article> <p>Neque porro quisquam </p> <p>est qui dolorem ipsum quia dolor sit amet,</p> <div><p>consectetur, adipisci velit.....</p></div> </article> <div> <p> consectetur, adipisci velit</p> <article> <p> consectetur, adipisci velit</p> </article> </div> </body> </html>
আউটপুট
এটি নিচের ফলাফল দেবে −
