সিএসএস ছদ্ম-এলিমেন্ট বাংলায় (CSS Pseudo-elements in Bangla)

ছদ্ম- এলিমেন্টসমূহ কি কি?

একটি CSS এর ছদ্ম-এলিমেন্ট একটি এলিমেন্ট এর সুনির্দিষ্ট অংশের স্টাইল করার জন্য ব্যবহার করা হয়।

উদাহরণস্বরূপ, এটি ব্যবহার করা হতে পারে:

• একটি এলিমেন্ট এর মধ্যকার প্রথম অক্ষর বা লাইন স্টাইল করার জন্য
• একটি এলিমেন্ট এর উপাদান এর আগে বা পরে উপাদান প্রবেশ করানোর জন্য

সিনটেক্স

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

নোটঃ ডাবল কোলন নোটেশন নোটিশ - প্রথম লাইন: বনাম :: প্রথম লাইনে

এটি pseudo-classes এবং pseudo-elements এর মধ্যে পার্থক্য বোঝাতে W3C এর একটি প্রচেষ্টা।

CSS 2 এবং CSS 1 এ pseudo-classes এবং pseudo-elements উভয় ক্ষেত্রে সিঙ্গেল-কোলন সিনট্যাক্স ব্যবহৃহ হয়।

::first-line ছদ্ম-এলিমেন্ট

::first-line ছদ্ম-এলিমেন্ট কোন লেখার প্রথম লাইন স্টাইল করার জন্য ব্যবহৃত হয়।

নিচের উদাহরণটি লেখার সকল <p> এলিমেন্ট এর প্রথম লাইন ফরমেট করে।

p::first-line {
     color: #ff0000;
     font-variant: small-caps;
 }

নোটঃ ::first-line ছদ্ম-এলিমেন্ট শুধুমাত্র block-level এলিমেন্ট এর ক্ষেত্রে ব্যবহার করা যেতে পারে।

::first-line ছদ্ম-এলিমেন্টে নিম্নোক্ত প্রোপার্টিগুলো ব্যবহার করা হয়:

• font properties
• color properties
• background properties
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• clear

::first-letter ছদ্ম-এলিমেন্ট

::first-letter ছদ্ম-এলিমেন্ট কোন লেখার প্রথম অক্ষর স্টাইল করার জন্য ব্যবহৃত হয়।

নিচের উদাহরণটি লেখার সকল <p> এলিমেন্ট এর প্রথম অক্ষর ফরমেট করে।

p::first-letter {
color: #ff0000;
font-size: xx-large;
}

নোটঃ ::first-letter ছদ্ম-এলিমেন্ট শুধুমাত্র block-level এলিমেন্ট এর ক্ষেত্রে ব্যবহার করা যেতে পারে।

::first-letter ছদ্ম-এলিমেন্টে নিম্নোক্ত প্রোপার্টিগুলো ব্যবহার করা হয়:

• font properties
• color properties
• background properties
• margin properties
• padding properties
• border properties
• text-decoration
• vertical-align (only if "float" is "none")
• text-transform
• line-height
• float
• clear

Pseudo-elements এবং CSS Classes

Pseudo-elements, CSS classes এর সাথে একত্রে ব্যবহার করা যেতে পারে:

p.intro::first-letter {
     color: #ff0000;
     font-size:200%;
 }

উপরের উদাহরণটি class="intro" এর সাথে প্যারাগ্রাফ এর প্রথম অক্ষর লাল এবং বড় ফন্ট দেখাবে।

একাধিক ছদ্ম-এলিমেন্ট

বেশ কয়েকটি ছদ্ম-এলিমেন্টও একত্রে মিলিত হতে পারে।

নিচের উদাহরণটিতে, প্যারাগ্রাফ এর প্রথম অক্ষর লাল, বেশ বড় ফন্ট এর হবে। প্রথম লাইন এর বাকি অক্ষরগুলি নিল এবং small-caps হবে। প্যারাগ্রাফ এর বাকি অংশটুকু ডিফল্ট ফন্ট ও কালার এর হবে।

p::first-letter {
     color: #ff0000;
     font-size: xx-large;
 }
 
 p::first-line {
     color: #0000ff;
     font-variant: small-caps;
 }

সিএসএস - ::before ছদ্ম-এলিমেন্ট

::before ছদ্ম-এলিমেন্ট নির্দিষ্ট এলিমেন্ট এর পূর্বে কিছু উপাদান যোগ করার জন্য ব্যবহৃত হয়।

নিচের উদাহরণটিতে প্রতিটি <h1> এলিমেন্ট এর পূর্বে একটি ইমেজ (স্টিল ছবি) যোগ হবে।

h1::before {
     content: url(smiley.gif);
 }

সিএসএস - ::after ছদ্ম-এলিমেন্ট

::before ছদ্ম-এলিমেন্ট নির্দিষ্ট এলিমেন্ট এর পরে কিছু উপাদান যোগ করার জন্য ব্যবহৃত হয়।

নিচের উদাহরণটিতে প্রতিটি <h1> এলিমেন্ট এর পরে একটি ইমেজ (স্টিল ছবি) যোগ হবে।

h1::after {
content: url(smiley.gif);
}

সিএসএস - ::selection ছদ্ম-এলিমেন্ট

::selection ছদ্ম-এলিমেন্ট একটি এলিমেন্ট এর ব্যবহারকারী দ্বারা নির্বাচিত অংশটির সাথে মিল করে।

নিম্নোক্ত সিএসএস প্রোপার্টিজ ব্যবহার করা যেতে পারে ::selection: color, background, cursor, এবং outline.

নিম্নোক্ত উদাহরণ নির্বারিচ লেখাকে হলুদ ব্যাকগ্রাউন্ড এর সাথে সাথে লাল করে।

::selection {
     color: red; 
     background: yellow;
 }

সকল সি এস এস ছদ্ম-এলিমেন্ট

সকল সিএসএস Pseudo Classes