সিএসএস সিডো-এলিমেন্ট ব্যবহার করে কোন এইচটিএমএল এলিমেন্ট এর নির্দিষ্ট কোন অংসের জন্য স্টাইল কোড ব্যবহার করা যায়। নিচে ::first-letter সিডো-এলিমেন্ট এর ব্যাবহারিক উদাহরন দেখুন।
This paragraph are used CSS Pseudo-Element for styleing text.
সিএসএস সিডো-এলিমেন্ট হল কত গুলো বিশেষ কিওয়ার্ড, যা এইচটিএমএল এলিমেন্ট গুলোর নির্দিষ্ট কোন অংসের স্টাইল করতে বাবহার করা হয়। সিডো-এলিমেন্ট ব্যবহার করে সাধারণত, কোন লেখা বা 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 ওয়েব পেজটি ব্রাউজ করুন।