CSS :nth-child() pseudo-class একটি এলিমেন্টকে সিলেক্ট করে যা অন্য একটি এলিমেন্টের nth চাইল্ড এলিমেন্ট।
সিনট্যাক্স
সিনট্যাক্স নিম্নরূপ:
:nth-child(){ /*declarations*/ }
উদাহরণ
CSS :nth-child() Pseudo class এর একটি উদাহরণ:
<!DOCTYPE html> <html> <head> <title>CSS :nth-child() Pseudo Class</title> <style> form { width:70%; margin: 0 auto; text-align: center; } * { padding: 2px; margin:5px; box-sizing: border-box; } input[type="button"] { border-radius: 10px; } .child{ display: inline-block; height: 40px; width: 40px; color: white; border: 4px solid black; } .child:nth-child(1){ background-color: #FF8A00; } .child:nth-child(2){ background-color: #F44336; } .child:nth-child(3){ background-color: #C303C3; } .child:nth-child(4){ background-color: #4CAF50; } .child:nth-child(5){ background-color: #03A9F4; } .child:nth-child(6){ background-color: #FEDC11; } </style> </head> <body> <form> <fieldset> <legend>CSS :nth-child() Pseudo Class</legend> <div id="container"> <div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div> </div><br> </body> </html>
আউটপুট
এটি নিম্নলিখিত আউটপুট তৈরি করবে:
আরেকটি উদাহরণ
CSS nth-child() Pseudo class এর আরেকটি উদাহরণ:
<!DOCTYPE html> <html> <head> <style> * { font-size: 1.1em; list-style: circle; } li:first-child { background-color: seashell; font-family: cursive; } li:nth-child(2) { background-color: azure; font-family: "Brush Script Std", serif; } li:last-child { background-color: springgreen; font-family: "Gigi", Arial; } </style> </head> <body> <p>Famous Cricket Stadiums</p> <ul> <li>Eden Gardens, Kolkata, India</li> <li>Melbourne Cricket Ground, Melbourne, Australia</li> <li>DY Patil Sports Stadium, Navi Mumbai, India</li> </ul> </body> </html>
আউটপুট
এটি নিম্নলিখিত আউটপুট তৈরি করবে:
