সিএসএস সডো-এলিমেন্ট - CSS Pseudo-Element


সিএসএস সিডো-এলিমেন্ট ব্যবহার করে কোন এইচটিএমএল এলিমেন্ট এর নির্দিষ্ট কোন অংসের জন্য স্টাইল কোড ব্যবহার করা যায়। নিচে ::first-letter সিডো-এলিমেন্ট এর ব্যাবহারিক উদাহরন দেখুন।

This paragraph are used CSS Pseudo-Element for styleing text.



Pseudo Element

সিএসএস সিডো-এলিমেন্ট হল কত গুলো বিশেষ কিওয়ার্ড, যা এইচটিএমএল এলিমেন্ট গুলোর নির্দিষ্ট কোন অংসের স্টাইল করতে বাবহার করা হয়। সিডো-এলিমেন্ট ব্যবহার করে সাধারণত, কোন লেখা বা text এর প্রথম বর্ণ, প্রথম শব্দ অথবা প্রথম লাইনকে নির্দিষ্ট করে স্টাইল করা যায়।

নিচে সিএসএস সিডো-এলিমেন্ট এর সিনট্যাক্স দেখুন।

সিনট্যাক্স

selector::pseudo-element {
   property:value;
   }

কোড এডিটর


নিচে একটি উদাহরন দেখুন, যেখানে একটি ::first-line সিডো-এলিমেন্ট ব্যবহার করা হয়েছে।

সিনট্যাক্স

/* The first line of every <p> element. */
p::first-line {
   color: blue;
   text-decoration: underline;
   }

কোড এডিটর


নোট - একটি সিলেক্টর কেবল মাত্র একটি সিডো-এলিমেন্ট ব্যবহার করা যায়। এটি অবশ্যই সাধারন সিলেক্টর গুলোর পরে সিএসএস স্টাইল কোডে লিখতে হবে।

নোট - W3C করতিক সিএসএস 3.0 সংস্করণে সিঙ্গেল কোলন " : " এর পরিবর্তে ডাবল কোলন " : " ব্যবহারের জন্য বলা হয়েছে। pseudo-classes এবং pseudo-elements এর মাঝে পার্থক্য করার জন্য এমন করা হয়েছে। কিন্তু সিএসএস 1.0 এবং সিএসএস 2.0 সংস্করণে pseudo-classes এবং pseudo-elements, এই উভয়ের জন্যই সিঙ্গেল কোলন " : " ব্যবহার করা হত। বর্তমানে পূর্বতন ব্রাউজার কম্পাটিবিলিটি এর ওপর বিবেচনা করে pseudo-classes এবং pseudo-element, উভয়ের জন্যই সিঙ্গেল কোলন " : " ব্যবহার করা হয়।


সিএসএস ক্লাস ব্যবহার

সিএসএস এর সিডো-এলিমেন্ট এর সাথে সিএসএস ক্লাসও ব্যবহার করা যায়। নিচে সিডো-এলিমেন্ট এর সাথে সিএসএস ক্লাস ব্যবহার করার সিনট্যাক্স দেখান হল।

সিনট্যাক্স

selector.class::pseudo-element {
   property: value;
   }

কোড এডিটর


নিচে একটি উদাহরন দেখুন, যেখানে ::first-letter সিডো-এলিমেন্ট এর সাথে একটি h1.color সিএসএস ক্লাস ব্যবহার করা হয়েছে।

উদাহরণ

h1.color::first-letter {
   color: teal;
   font-size:150%;
   }

কোড এডিটর



সকল সিএসএস সিডো-এলিমেন্ট

::marker ::cue-region::after (:after)
::part() ::first-letter (:first-letter)::backdrop
::placeholder ::first-line (:first-line)::before (:before)
::selection::grammar-error ::cue
::slotted()::spelling-error

সিএসএস এর সিডো-এলিমেন্ট সম্পর্কে Mozilla Developer থেকে আরও জানতে Pseudo-elements ওয়েব পেজটি ব্রাউজ করুন।