কখনও কখনও সিএসএস তৈরি করার সময়, আমরা একটি নির্দিষ্ট এলিমেন্ট টার্গেট করতে চাই। মনে করুন যদি আমাদের একটি HTML ডকুমেন্ট থাকে <div> ট্যাগ এবং <span> ট্যাগ দিয়ে ভরা, কিন্তু আমরা শুধু প্রতিটি টাইপের প্রথমটাকে টার্গেট করে কিছু স্টাইল দিতে চাই। সেটা আমরা করতে পারি যেটাকে বলে :first-of-type সিউডো-ক্লাস (pseudo-class)।
একটি সিউডো-ক্লাস (pseudo-class) হলো একটি উপায় যাতে একটি সিএসএস সিলেক্টর নির্দিষ্ট স্টাইল পায় মূল স্টাইল থেকে আলাদা। এটি নির্ভর করে এলিমেন্টটি কোন স্টেট (state) আছে। এই উদাহরণে, আমরা প্রথম <div> এবং প্রথম <span> সিলেক্ট করতে চাই যাতে সেটা স্টাইল করতে পারি – অন্য কোনো স্প্যান বা ডিভ সিলেক্ট হবে না।
এখানে একটি উদাহরণ দিয়ে শুরু করছি:
<html> <head> <style> body { display: flex; flex-flow: row wrap; } div { height: 100px; width: 200px; border: 1px solid black; margin: 20px; padding: 20px; } /* First of type */ div:first-of-type { background: purple; color: white; } div span:first-of-type { color: red; text-decoration: underline; background: lightblue; } </style> </head> <body> <div>I am the first div<span> I am inside the div and the first span</span><span> I am the second span</span></div> <div>I am the second the div<span> I am inside the div</span><span> I am the second span</span></div> <div>I am the third div<span> I am inside the div</span><span> I am the second span</span></div> <div>I am the fourth div<span> I am inside the div</span><span> I am the second span</span></div> <div>I am the fifth div<span> I am inside the div</span><span> I am the second span</span></div> <div>I am the sixth div<span> I am inside the div</span><span> I am the second span</span></div> <div>I am the seventh div<span> I am inside the div</span><span> I am the second span</span></div> </body> </html>
এখানে ডিভ (div) এবং সেগুলোর ভিতরে স্প্যান (span) এর একটি সেট আছে। সিএসএস সিলেক্টর div:first-of-type শুধু তার টাইপের সবচেয়ে প্রথম এলিমেন্টটাকে সিলেক্ট করে এবং স্টাইল করে। div span:first-of-type সিলেক্ট করে প্রতিটি ডিভের প্রথম স্প্যানকে, যেহেতু ডিভটি প্যারেন্ট এলিমেন্ট।
div:first-of-type একই বলতে পারা যাবে div:nth-child(1)।
উপসংহার
এই আর্টিকেলে আমরা :first-of-type সিউডো-ক্লাসের দিকে তাকিয়েছি। আমরা দেখেছি যে একটি সিউডো-ক্লাস মূলত কেবল কিছু কিছুর বর্ণনা করে যা স্টেট আমরা চাই সিএসএস সিলেক্টরটি থাকতে যখন আমরা সেটাকে স্টাইল করি। আমরা সাধারণ সিনট্যাক্সটাও দেখেছি। আমি সুপারিশ করব অন্যান্য সিউডো-সিলেক্টরগুলোর দিকে তাকিয়ে দেখুন এবং তাদের সাথে পরিচিত হন!
