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



কিছু সিলেক্টরে special effect যুক্ত করার জন্য সিএসএস সিডো-এলিমেন্ট ব্যবহার করা হয়।


সিডো ক্লাস এর সিনট্যাক্স হল নিম্নরূপ -

কোড দেখুন

selector:pseudo-element {property:value;}


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

কোড দেখুন

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




:first-line Pseudo-element

কোন টেক্সটের প্রথম লাইনের জন্য বিশেষ কোন স্টাইল নির্ধারণ করতে first-line Pseudo-element ব্যবহার করা হয়।

নীচের উদাহরণে সব প্যারাগ্রাফ ট্যাগের শুধূমাত্র প্রথম লাইনে এই স্টাইলগুলো ব্যবহার হবে। তবে এটা ব্রাউজার window এর ওপর নির্ভরশীল, ব্রাউজার যেখানে লাইন ব্রেক করবে তার আগে পর্যন্ত এই স্টাইল কাজ করবে।

কোড দেখুন

p:first-line{
color:#00ff00;
font-width:bold;
}


শুধুমাত্র ব্লক লেভেল এলিমেন্টের সাথেই first-line Pseudo-element ব্যবহার করা যায়। নীচের সিএসএস প্রপার্টিগুলো first-line Pseudo-element এর সাথে ব্যবহার করা যায় -

font প্রপার্টি,
color প্রপার্টি,
background প্রপার্টি,
word-spacing,
letter-spacing,
text-decoration,
vertical-align,
text-transform,
line-height,
clear.


:first-letter Pseudo-element

কোন টেক্সটের প্রথম বর্ণ বা letter এর জন্য বিশেষ কোন স্টাইল নির্ধারণ করতে first-letter Pseudo-element ব্যবহার করা হয়।

কোড দেখুন

p:first-letter{
color:#00ff00;
font-size:50px;
}


শুধুমাত্র ব্লক লেভেল এলিমেন্টের সাথেই first-letter Pseudo-element ব্যবহার করা যায়। নীচের সিএসএস প্রপার্টিগুলো first-letter Pseudo-element এর সাথে ব্যবহার করা যায় -

font প্রপার্টি,
color প্রপার্টি,
background প্রপার্টি,
margin,
padding,
border,
text-decoration,
vertical-align( শুধুমাত্র তখনই যখন 'float:none'),
text-transform,
line-height,
float,
clear.


Pseudo-elements and CSS Classes

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

কোড দেখুন

p.article:first-letter {color:#0000ff;}
<p class="article">A paragraph of an article</p>


এই সিএসএস কোডের ফলে artical নামের ক্লাস যুক্ত সকল প্যারাগ্রাফ এর প্রথম বর্ণ বা first letter এর রং বা color হবে নীল।


একাধিক Pseudo-element

একই সাথে বিভিন্ন সিডো-এলিমেন্ট ব্যাবহৃত হতে পারে। নিচে একটি উদাহরণ দেখুন -

কোড দেখুন

p:first-letter{
color:#0000ff;
font-width:bold;
}
p:first-line{
color:#0000ff;
text-decoration:underline;
}


p:first-letter প্রপার্টির ফলে পারাগ্রাফের প্রথম বর্ণে বা letter এর রং হবে নীল এবং font width এর মান হবে bold. আবার p:first-line প্রপার্টির ফলে পারাগ্রাফের প্রথম লাইনের রং বা color হবে নীল এবং text-decoration হবে underline.


:before Pseudo-element

কোন এলিমেন্ট কন্টেন্টের আগে অন্য কোন কন্টেন্ট প্রদর্শন করতে ":before" সিডো-এলিমেন্টকে ব্যবহার করা যায়।

কোড দেখুন

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


ওপরের কোডগুলোর ফলে সব h1 এলিমেন্টের পূর্বে একটি image প্রদর্শিত হবে।


:after Pseudo-element

কোন এলিমেন্ট কন্টেন্টের পরে অন্য কোন কন্টেন্ট প্রদর্শন করতে ":after" সিডো-এলিমেন্টকে ব্যবহার করা যায়।

কোড দেখুন

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


ওপরের কোডগুলোর ফলে সব h1 এলিমেন্টের পরে একটি image প্রদর্শিত হবে।


সিএসএস এর সব Pseudo-element

সিলেক্টর উদাহরণ বর্ণনা
:link a:link সব unvisited হাইপারলিংক নির্দিষ্ট করে।
:visited a:visited সব visited হাইপারলিংক নির্দিষ্ট করে।
:active a:active সব হাইপারলিংকের active effect নির্দিষ্ট করে।
:hover a:hover সব হাইপারলিংকের জন্য mouse hover effect নির্দিষ্ট করে।
:focus input:focus সেই সকল ইনপুট এলিমেন্ট নির্দিষ্ট করে যেগুলো focus এ রয়েছে।
:first-letter p:first-letter সমস্ত পারাগ্রাফ বা <p> এলিমেন্টের ১ম বর্ণ বা letter নির্দিষ্ট করে।
:first-line p:first-line সমস্ত পারাগ্রাফ বা <p> এলিমেন্টের ১ম লাইন নির্দিষ্ট করে।
:first-child p:first-child সে সমস্ত পারাগ্রাফ বা <p> এলিমেন্ট নির্দিষ্ট করে যেটা তার parant এর first child.
:before p:before সমস্ত পারাগ্রাফ বা <p> এলিমেন্টের পূর্বে কন্টেন্ট সংযুক্ত করে।
:after p:after সমস্ত পারাগ্রাফ বা <p> এলিমেন্টের পরে কন্টেন্ট সংযুক্ত করে।
:lang(language) p:lang(it) সেই সমস্ত পারাগ্রাফ বা

এলিমেন্ট নির্দিষ্ট করে যেটার সাথে একটি lang এট্রিবিউট আছে এবং যার মান শুরু হয়েছে " it " দিয়ে।








এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Copyright 2016-2018 by websschool.com, All Rights Reserved.