একটি এলিমেন্টের নির্দিষ্ট অংশ স্টাইল করতে CSS সিউডো-এলিমেন্ট ব্যবহার করা হয়।
উদাহরণস্বরূপ, এটি ব্যবহার করা যায়:
সিউডো-এলিমেন্টের সিনট্যাক্স:
selector::pseudo-element {
property:value;
}ডাবল কোলন নোটেশন লক্ষ্য করুন - ::first-line বনাম :first-line
CSS3-এ সিউডো-এলিমেন্টের জন্য সিঙ্গেল-কোলন নোটেশনের বদলে ডাবল কোলন ব্যবহার শুরু হয়। এটি ছিল সিউডো-ক্লাস এবং সিউডো-এলিমেন্টের মধ্যে পার্থক্য করার জন্য W3C-এর একটি প্রচেষ্টা।
CSS2 এবং CSS1-এ সিউডো-ক্লাস এবং সিউডো-এলিমেন্ট উভয়ের জন্যই সিঙ্গেল-কোলন সিনট্যাক্স ব্যবহার করা হতো।
ব্যাকওয়ার্ড কম্প্যাটিবিলিটির জন্য, CSS2 এবং CSS1 সিউডো-এলিমেন্টের জন্য সিঙ্গেল-কোলন সিনট্যাক্স গ্রহণযোগ্য।
একটি টেক্সটের প্রথম লাইনে একটি বিশেষ স্টাইল যোগ করতে ::first-line সিউডো-এলিমেন্ট ব্যবহার করা হয়।
নিচের উদাহরণে সব <p> এলিমেন্টের টেক্সটের প্রথম লাইন ফরম্যাট করা হয়েছে:
p::first-line {
color: #ff0000;
font-variant: small-caps;
}মনে রাখবেন: ::first-line সিউডো-এলিমেন্ট শুধুমাত্র ব্লক-লেভেল এলিমেন্টে প্রয়োগ করা যায়।
::first-line সিউডো-এলিমেন্টে নিচের প্রপার্টিগুলো প্রযোজ্য:
একটি টেক্সটের প্রথম অক্ষরে একটি বিশেষ স্টাইল যোগ করতে ::first-letter সিউডো-এলিমেন্ট ব্যবহার করা হয়।
নিচের উদাহরণে সব <p> এলিমেন্টের টেক্সটের প্রথম অক্ষর ফরম্যাট করা হয়েছে:
p::first-letter {
color: #ff0000;
font-size: xx-large;
}মনে রাখবেন: ::first-letter সিউডো-এলিমেন্ট শুধুমাত্র ব্লক-লেভেল এলিমেন্টে প্রয়োগ করা যায়।
::first-letter সিউডো-এলিমেন্টে নিচের প্রপার্টিগুলো প্রযোজ্য:
সিউডো-এলিমেন্ট CSS ক্লাসের সাথে একত্রে ব্যবহার করা যায়:
p.intro::first-letter {
color: #ff0000;
font-size:200%;
}এটি একটি ভূমিকা।
এটি কিছু টেক্সটসহ একটি প্যারাগ্রাফ। এমনকি আরও কিছু টেক্সট।
উপরের উদাহরণটি class="intro"-যুক্ত প্যারাগ্রাফের প্রথম অক্ষর লাল এবং বড় আকারে প্রদর্শন করবে।
একাধিক সিউডো-এলিমেন্টও একত্রে ব্যবহার করা যায়।
নিচের উদাহরণে, একটি প্যারাগ্রাফের প্রথম অক্ষর লাল এবং xx-large ফন্ট সাইজে হবে। প্রথম লাইনের বাকি অংশ নীল এবং small-caps-এ হবে। প্যারাগ্রাফের বাকি অংশ ডিফল্ট ফন্ট সাইজ ও রঙে থাকবে:
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
p::first-line {
color: #0000ff;
font-variant: small-caps;
}একটি এলিমেন্টের কনটেন্টের আগে কিছু কনটেন্ট যোগ করতে ::before সিউডো-এলিমেন্ট ব্যবহার করা যায়।
নিচের উদাহরণে প্রতিটি <h1> এলিমেন্টের কনটেন্টের আগে একটি ইমেজ যোগ করা হয়েছে:
h1::before {
content: url(smiley.gif);
}একটি এলিমেন্টের কনটেন্টের পরে কিছু কনটেন্ট যোগ করতে ::after সিউডো-এলিমেন্ট ব্যবহার করা যায়।
h1::after {
content: url(smiley.gif);
}::selection সিউডো-এলিমেন্ট একটি এলিমেন্টের সেই অংশের সাথে মেলে, যা একজন ব্যবহারকারী সিলেক্ট করেছেন।
::selection-এ নিচের CSS প্রপার্টি প্রয়োগ করা যায়: color, background, cursor, এবং outline।
নিচের উদাহরণে সিলেক্ট করা টেক্সট একটি হলুদ ব্যাকগ্রাউন্ডে লাল করা হয়েছে:
::selection {
color: red;
background: yellow;
}| সিলেক্টর | উদাহরণ | উদাহরণের বিবরণ |
|---|---|---|
| ::after | p::after | প্রতিটি <p> এলিমেন্টের কনটেন্টের পরে কিছু যোগ করে |
| ::before | p::before | প্রতিটি <p> এলিমেন্টের কনটেন্টের আগে কিছু যোগ করে |
| ::first-letter | p::first-letter | প্রতিটি <p> এলিমেন্টের প্রথম অক্ষর সিলেক্ট করে |
| ::first-line | p::first-line | প্রতিটি <p> এলিমেন্টের প্রথম লাইন সিলেক্ট করে |
| ::selection | p::selection | একজন ব্যবহারকারী সিলেক্ট করেছেন এমন একটি এলিমেন্টের অংশ সিলেক্ট করে |