সিএসএস সুডো-এলিমেন্ট
সুডো-এলিমেন্ট কি?
সিএসএস সুডো-এলিমেন্ট দ্বারা একটি এলিমেন্টের নির্দিষ্ট অংশকে সিলেক্ট করে স্টাইল করা হয়।
উদাহরণস্বরুপঃ
- একটি এলিমেন্টের প্রথম অংশ বা প্রথম লাইনের স্টাইল পরিবর্তন।
- একটি এলিমেন্টের পূর্বে এবং পরে কন্টেন্ট যোগ।
সকল সিএসএস সুডো-এলিমেন্ট
| সিলেক্টর | উদাহরণ | বর্ণনা |
|---|---|---|
::after |
p::after |
<p> এলিমেন্টের পরে কন্টেন্ট যোগ করবে। |
::before |
p::before |
<p> এলিমেন্টের পূর্বে কন্টেন্ট যোগ করবে। |
::first-letter |
p::first-letter |
<p> এলিমেন্টের প্রথম শব্দটি সিলেক্ট করবে। |
::first-line |
p::first-line |
<p> এলিমেন্টের প্রথম লাইনটিকে সিলেক্ট করবে। |
::selection |
p::selection |
ব্যবহারকারী কর্তৃক সিলেক্টকৃত <p> এলিমেন্টের অংশকে সিলেক্ট করবে। |
গঠণপ্রণালী
selector::pseudo-element {
property: value;
}
সিএসএস(১) এবং সিএসএস(২)-এ সুডো-এলিমেন্ট এবং সুডো-ক্লাসে একটি কোলন ব্যবহার হতো। সিএসএস(৩)-এ সুডো-এলিমেন্টে একটি কোলন ব্যবহারের পরিবর্তে দুইটি কোলন ব্যবহারের প্রচলন করে। সুডো-এলিমেন্ট এবং সুডো-ক্লাসের গঠণপ্রণালীর মধ্যে পার্থক্য তৈরি করার জন্য ইহা প্রচলন করা হয়েছিল।
::first-line সুডো-এলিমেন্ট
::first-line সুডো-এলিমেন্টটি একটি টেক্সটের প্রথম লাইনকে সিলেক্ট করার জন্য ব্যবহার করা হয়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
p::first-line {
color: limegreen;
text-decoration: underline;
}
</style>
</head>
<body>
<p>প্রথম লাইনের কালার পরিবর্তন হয়েছে।<br>
দ্বিতীয় লাইনের কালার পরিবর্তন হয়নি।<br>
তৃতীয় লাইনের কালার পরিবর্তন হয়নি।</p>
</body>
</html>
ফলাফল
বিঃদ্রঃ ::first-line সুডো-এলিমেন্টটি শুধুমাত্র ব্লক-লেভেল এলিমেন্টের জন্যে ব্যবহার করা যায়।
::first-line
সুডো-এলিমেন্টে নিম্নলিখিত প্রোপার্টিগুলো ব্যবহার করা যায়ঃ
fontcolorbackgroundword-spacingletter-spacingtextVertical-aligntext-transforline-heightclear
::first-letter সুডো-এলিমেন্ট
একটি টেক্সটের প্রথম অক্ষরকে সিলেক্ট করার জন্য ::first-letter সুডো-এলিমেন্টটি ব্যবহার করা হয়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
p::first-letter {
font-size: 300%;
font-weight: bold;
}
</style>
</head>
<body>
<h3>নিচের লাইনটির প্রথম অক্ষরের আকার স্বাভাবিকের চেয়ে বড় হবে।</h3>
<p>পত্রিকার লাইনের প্রথম অক্ষর এরকম বড় করে লেখা হয়।</p>
</body>
</html>
ফলাফল
বিঃদ্রঃ::first-letter সুডো-এলিমেন্টটি শুধুমাত্র ব্লক-লেভেল এলিমেন্টের জন্য ব্যবহার করা যায়।
::first-letter সুডো-এলিমেন্টে নিম্নলিখিত প্রোপার্টিগুলো ব্যবহার করা যায়ঃ
fontcolorbackgroundmarginpaddingbordertext-decorationvertical-align("float"যদি"none"হয়)text-transformline-heightfloatclear
সুডো-এলিমেন্ট এবং সিএসএস ক্লাস
সুডো-এলিমেন্টগুলো সিএসএস ক্লাসের সাথেও ব্যবহার করা যায়ঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
p.line::first-letter {
font-size: 300%;
font-weight: bold;
}
</style>
</head>
<body>
<p>নিচের লাইনটির প্রথম অক্ষরের আকার স্বাভাবিকের চেয়ে বড় হবে।</p>
<p class="line">পত্রিকার লাইনের প্রথম অক্ষর এরকম বড় করে লেখা হয়।</p>
</body>
</html>
এই উদাহরণটিতে শুধুমাত্র class="line" যুক্ত <p> এলিমেন্টের টেক্সটের প্রথম অক্ষরকে স্টাইল করা হয়েছে।
ফলাফল
একাধিক সুডো-এলিমেন্টের ব্যবহার
আপনি চাইলে একই এলিমেন্টে একাধিক সুডো এলিমেন্ট ব্যবহার করতে পারেন।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
p::first-letter {
font-size: 300%;
font-weight: bold;
}
p::first-line {
color: limegreen;
text-decoration: underline;
}
</style>
</head>
<body>
<h5>নিচের লাইনটির প্রথম অক্ষরের আকার স্বাভাবিকের চেয়ে বড় হবে। এছাড়াও পুরো লাইনে ব্যাকগ্রাউন্ডের কালার
এবং টেক্সটের নিচে আন্ডারলাইন যুক্ত হবে।</h5>
<p>পত্রিকার লাইনের প্রথম অক্ষর এরকম বড় করে লেখা হয়।<br>
দ্বিতীয় লাইনের কালার পরিবর্তন হয়নি।<br>
তৃতীয় লাইনের কালার পরিবর্তন হয়নি।</p>
</body>
</html>
ফলাফল
::before সুডো-এলিমেন্ট
একটি এলিমেন্টের আগে কন্টেন্ট যোগ করার জন্য ::before সুডো-এলিমেন্ট ব্যবহার করা হয়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
h1::before {
content: url(smallimg.jpg);
}
</style>
</head>
<body>
<h4>এলিমেন্টের পূর্বে কন্টেন্ট যোগ করতে ::before সুডো-এলিমেন্ট ব্যবহার করতে হয়।</h4>
<br>
<h1>এই লাইনের পূর্বে একটি ইমেজ যুক্ত করা হয়েছে।</h1>
</body>
</html>
ফলাফল
::after সুডো-এলিমেন্ট
একটি এলিমেন্টের পরে কন্টেন্ট যোগ করার জন্য ::after সুডো-এলিমেন্ট ব্যবহার করা হয়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
h1::after {
content: url(smallimg.jpg);
}
</style>
</head>
<body>
<h4>এলিমেন্টের পরে কন্টেন্ট যোগ করতে ::after সুডো-এলিমেন্ট ব্যবহার করতে হয়।</h4>
<br>
<h1>এই লাইনের পরে একটি ইমেজ যুক্ত করা হয়েছে।</h1>
</body>
</html>
ফলাফল
::selection সুডো-এলিমেন্ট
ব্যবহারকারী একটি এলিমেন্টের কোন অংশকে সিলেক্ট করলে, সিলেক্টকৃত অংশকে স্টাইল করার জন্য ::selection সুডো-এলিমেন্টটি ব্যবহার করা হয়।
::selection সুডো-এলিমেন্টের সাথে নিচের সিএসএস প্রোপার্টিগুলো ব্যবহার করা যায়ঃ
colorbackgroundcursoroutlineউদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
p::selection {
background: green;
color: white;
}
</style>
</head>
<body>
<h3>নিচের p এলিমেন্টের টেক্সট সিলেক্ট করুন!!</h3>
<p>এই লাইনের টেক্সট সিলেক্ট করুন এবং ::selection সুডো এলিমেটের ব্যবহার দেখুন।</p>
</body>
</html>
ফলাফল