X

X

X

CSS Pseudo-elements (ছদ্মবেশি ইলামেন্ট)


Pseudo-Element বলতে কি বোঝায়?

কোনো একটি ইলামেন্টের নির্দিষ্ট কিছু অংশের উপর স্টাইল প্রয়োগ করার জন্য এই ইলামেন্ট ব্যবহৃত হয়।

উদাহরণস্বরূপ এটি নিম্নোক্ত কাজের জন্য ব্যবহৃত হয়:

  • কোনো ইলামেন্টের প্রথম অক্ষর বা লাইন স্টাইল করার ক্ষেত্রে।
  • কোনো ইলামেন্টের কন্টেন্টের সামনে ও পিছনে কন্টেন্ট যুক্ত করার ক্ষেত্রে।

Syntax

pseudo-element লিখার জন্য নিচের মত কোড লিখতে হয়:

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

double colon notation টি ভালোভাবে লক্ষ্য করুণ – ::first-line:first-line দুটি একই রকম নয়।

CSS3 তে single-colon কে double colon দিযে প্রতিস্থাপিত করা হয়েছে যাতে pseudo-classespseudo-elements এর মধ্যে পার্থক্য নিরূপণ করা যায়।

CSS2 ও CSS1 উভয়ের জন্য single-colon syntax ব্যবহার করা হতো। একারণে ব্যকওয়ার কমপ্যাটিবিলিটির জন্য অর্থাৎ, পুরোনো কোড কে নতুন ব্রাউজারে সাপোর্ট করার জন্য উভয় সিনট্যাক্সই সমর্থিত।


::first-line Pseudo-element

কোনো ইলামেন্টের কন্টেন্টের প্রথম লাইনে স্টাইল প্রয়োগ করার জন্য ::first-line pseudo-element ব্যবহৃত হয়। নিচের উদহারণটি দেখুন:

Code Example

<style>
p::first-line {
    color: #ff0000;
    font-variant: small-caps;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

বি:দ্র: The ::first-line pseudo-element শুধুমাত্র ব্লক লেভেল ইলামেন্টের জন্য প্রযোজ্য।

::first-line pseudo-element এ নিচের প্রপার্টিগুলো ব্যবহার করা যায়:

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

::first-letter Pseudo-element

কোনো ইলামেন্ট কন্টেন্টের প্রথম অক্ষরে স্টাইল প্রয়োগ করার জন্য ::first-letter pseudo-element ব্যবহৃত হয়। নিচের উদহারণটি লক্ষ্য করুণ:

Code Example

<style>
p::first-letter {
    color: #ff0000;
    font-size: xx-large;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

বি:দ্র: ::first-letter pseudo-element শুধুমাত্র ব্লক লেভেল ইলামেন্টের ক্ষেত্রে প্রযোজ্য।

::first-letter pseudo- element এর ক্ষেত্রে নিচের প্রপার্টিগুলো প্রযোজ্য:

  • font properties
  • color properties
  • background properties
  • margin properties
  • padding properties
  • border properties
  • text-decoration
  • vertical-align (যখন “float” এর মান “none” শুধুমাত্র তখন প্রযোজ্য)
  • text-transform
  • line-height
  • float
  • clear

Pseudo-element এবং CSS Class এর সমন্বিত ব্যবহার

Pseudo-element ও CSS class কে একসাথে সমন্বয় করে ব্যবহার করা যায়:

Code Example

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

উপরের উদাহরণে দেখানো হয়েছে, অনুচ্ছেদটির প্রথম অক্ষরটি লাল এবং বড় অক্ষরে উপস্থাপিত হবে।


একাধিক Pseudo-element এর সমন্বিত ব্যবহার

একসাথে একাধিক Pseudo-element সমন্বয় করে ব্যবহার করা যায়।

নিচের উদাহরণের অনুচ্ছেদটিতে প্রথম অক্ষরটি xx-large font size -এ উপস্থাপিত হবে এবং প্রথম লাইনের অবশিষ্ট অক্ষরগুলো নীল রং ও ছোটো হাতের অক্ষরে এবং অনুচ্ছেদটি অবশিষ্ট অক্ষরগুলো ডিফল্ট ফন্ট সাইজে উপস্থাপিত হবে।

Code Example

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

p::first-line {
    color: #0000ff;
    font-variant: small-caps;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


CSS – ::before Pseudo-element

কোনো ইলামেন্টের কন্টেটের পূর্বে কিছু কন্টেন্ট যুক্ত করার জন্য ::before pseudo-element ব্যবহার করা হয়। নিচের উদাহরণে <h1> element এর পূর্বে একটি ছবি যুক্ত করা হয়েছে:

Code Example

h1::before {
    content: url(https://www.w3schools.com/css/smiley.gif);
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


CSS – ::after Pseudo-element

কোনো ইলামেন্টের কন্টেটের পূর্বে কিছু কন্টেন্ট যুক্ত করার জন্য ::after pseudo-element ব্যবহার করা হয়। নিচের উদাহরণে <h1> element এর পরে একটি ছবি যুক্ত করা হয়েছে:

Code Example

h1::after {
    content: url(https://www.w3schools.com/css/smiley.gif);
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


CSS – ::selection Pseudo-element

কোনো ইলামেন্টের কন্টেন্টের সিলেক্টেড অংশের উপর স্টাইল প্রয়োগ করার জন্য ::selection pseudo-element ব্যবহার করা হয়।
::selection এর জন্য নিম্নোক্ত প্রপার্টিগুলো প্রযোজ্য:

  • color
  • background
  • cursor
  • outline

নিচের উদাহরণে হলুদ ব্যাকগ্রাউন্ড ও লাল রং সেট করা হয়েছে:

Code Example

::-moz-selection { /* Code for Firefox */
    color: red;
    background: yellow;
}

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


নিজে নিজে চর্চা করুণ

Exercise 1 »  Exercise 2 »  Exercise 3 »


CSS Pseudo Element সমূহ

সিলেক্টর উদাহরণ বর্ণনা
::after p::after <p> element এর পরে কোনোকিছু যুক্ত করার জন্য ব্যবহৃত হয়।
::before p::before <p> element এর পূর্বে কোনোকিছু যুক্ত করার জন্য ব্যবহৃত হয়।
::first-letter p::first-letter <p> element এর প্রথম অক্ষরকে সিলেক্ট করার জন্য ব্যবহৃত হয়।
::first-line p::first-line <p> element এর প্রথম লাইনকে সিলেক্ট করার জন্য ব্যবহৃত হয়।
::selection p::selection ব্যবহারকারী কোনো ইলামেন্টের যে অংশটুকু সিলেক্ট করে সেটিতে স্টাইল যুক্ত করার জন্য ব্যবহৃত হয়।

CSS Pseudo Class সমূহ

সিলেক্টর উদাহরণ বর্ণনা
:active a:active active link সিলেক্ট করার জন্য ব্যবহৃত হয়।
:checked input:checked সব checked <input> element সিলেক্ট করার জন্য ব্যবহৃত হয়।
:disabled input:disabled সব disabled <input> element সিলেক্ট করার জন্য ব্যবহৃত হয়।
:empty p:empty যেসব <p> element এর children নাই তাদেরকে সিলেক্ট করার জন্য ব্যবহৃত হয়।
:enabled input:enabled সব enabled <input> element কে সিলেক্ট করার জন্য ব্যবহৃত হয়।
:first-child p:first-child যেসব <p> elements তাদের parent এর প্রথম চাইল্ড তাদেরকে সিলেক্ট করার জন্য ব্যবহৃত হয়।
:first-of-type p:first-of-type Selects every <p> element that is the first <p> element of its parent
:focus input:focus Selects the <input> element that has focus
:hover a:hover Selects links on mouse over
:in-range input:in-range Selects <input> elements with a value within a specified range
:invalid input:invalid Selects all <input> elements with an invalid value
:lang(language) p:lang(it) Selects every <p> element with a lang attribute value starting with “it”
:last-child p:last-child Selects every <p> elements that is the last child of its parent
:last-of-type p:last-of-type Selects every <p> element that is the last <p> element of its parent
:link a:link Selects all unvisited links
:not(selector) :not(p) Selects every element that is not a <p> element
:nth-child(n) p:nth-child(2) Selects every <p> element that is the second child of its parent
:nth-last-child(n) p:nth-last-child(2) Selects every <p> element that is the second child of its parent, counting from the last child
:nth-last-of-type(n) p:nth-last-of-type(2) Selects every <p> element that is the second <p> element of its parent, counting from the last child
:nth-of-type(n) p:nth-of-type(2) Selects every <p> element that is the second <p> element of its parent
:only-of-type p:only-of-type Selects every <p> element that is the only <p> element of its parent
:only-child p:only-child Selects every <p> element that is the only child of its parent
:optional input:optional Selects <input> elements with no “required” attribute
:out-of-range input:out-of-range Selects <input> elements with a value outside a specified range
:read-only input:read-only Selects <input> elements with a “readonly” attribute specified
:read-write input:read-write Selects <input> elements with no “readonly” attribute
:required input:required Selects <input> elements with a “required” attribute specified
:root root Selects the document’s root element
:target #news:target Selects the current active #news element (clicked on a URL containing that anchor name)
:valid input:valid Selects all <input> elements with a valid value
:visited a:visited Selects all visited links