কম্পিউটার টিউটোরিয়াল

CSS চাইল্ড সিলেক্টর

CSS চাইল্ড সিলেক্টর ব্যবহার করে নির্দিষ্ট পেরেন্ট এলিমেন্টের সব চাইল্ড এলিমেন্ট সিলেক্ট করা হয়।

সিনট্যাক্স

CSS চাইল্ড সিলেক্টরের সিনট্যাক্স:

element > element { /*declarations*/ }

উদাহরণ

নিচের উদাহরণগুলো CSS ডিসেন্ডেন্ট সিলেক্টর প্রদর্শন করে:

<!DOCTYPE html> <html> <head> <style> * {    padding: 5px; } article > div {    border: dashed midnightblue;    width: 45%; } div > p {    font-size: 20px;    font-style: italic;    box-shadow: inset 0 0 8px orange; } </style> </head> <body> <h2>Examination Detail</h2> <article>    <div>Exam Details</div>    <div><p>Exam begins at 11AM.</p></div>    <span><div> Do not bring cell phone.</div></span>    <div>    <div>Candidates should reach the center till 10:45.</div>    <br/>    The candidates need to be bring the Admit Card.    </div> </article> </body> </html>

আউটপুট

এটি নিচের আউটপুট দেবে:

CSS চাইল্ড সিলেক্টর

উদাহরণ

<!DOCTYPE html> <html> <head> <style> div {    margin: auto;    width: 200px;    padding: 30px;    background-color: moccasin; } div > div {    box-shadow: inset 0 0 8px mediumseagreen;    border-top-right-radius: 50%;    border-bottom-left-radius: 50%; } </style> </head> <body> <div> <div></div> </div> </body> </html>

আউটপুট

এটি নিচের আউটপুট দেবে:

CSS চাইল্ড সিলেক্টর


  1. CSS চাইল্ড সিলেক্টর

  2. CSS-এ Background Attachment

  3. ফ্লেক্সবক্স দিয়ে অ্যাডভান্সড CSS লেআউট

  4. শুধু CSS ব্যবহার করে স্মুথ স্ক্রোলিং বাস্তবায়ন করা