কখনও কখনও আমরা যখন আমাদের CSS তৈরি করি, তখন আমরা একটি নির্দিষ্ট উপাদানকে লক্ষ্য করতে চাই। ধরা যাক যদি আমাদের কাছে <div> পূর্ণ একটি HTML ডকুমেন্ট থাকে ট্যাগ এবং <span> ট্যাগ, কিন্তু শুধুমাত্র প্রতিটি টাইপের প্রথমটিকে টার্গেট করতে চেয়েছিল যাতে এটি কোনোভাবে স্টাইল করা যায়। আমরা এটা করতে পারি যাকে বলা হয় :first-of-type pseudo-class.
একটি ছদ্ম-শ্রেণি হল একটি সিএসএস নির্বাচকের জন্য নির্দিষ্ট শৈলী প্রদত্ত মূল শৈলী থেকে আলাদা করার একটি উপায়। এটি উপাদানটি কোন অবস্থায় আছে তার উপর নির্ভর করে। এই ক্ষেত্রে, আমরা প্রথম <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>
এখানে আমাদের সেই ডিভের ভিতরে ডিভ এবং স্প্যানগুলির একটি সেট রয়েছে। CSS নির্বাচক div:first-of-type শুধুমাত্র তার ধরনের প্রথম উপাদান নির্বাচন করে এবং এটি শৈলী. div span:first-of-type প্রতিটি div-এ প্রথম স্প্যান নির্বাচন করে যেহেতু div হল মূল উপাদান।
div:first-of-type div:nth-child(1) বলার মতই হবে
উপসংহার
এই নিবন্ধে আমরা দেখেছি :প্রথম-অফ-টাইপ ছদ্ম-শ্রেণী। আমরা দেখেছি যে একটি ছদ্ম-শ্রেণি মূলত এমন কিছু যা বর্ণনা করে যে অবস্থায় আমরা CSS নির্বাচককে স্টাইল করার সময় চাই। আমরা সাধারণ সিনট্যাক্সও দেখেছি। আমি অন্যান্য ছদ্ম-নির্বাচনকারীদের দিকে নজর দেওয়ার পরামর্শ দেব এবং তাদের জন্যও একটি অনুভূতি পেতে চাই!
