Huge Sell on Popular Electronics
ছদ্ম- এলিমেন্টসমূহ কি কি?
একটি 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;
}
সকল সি এস এস ছদ্ম-এলিমেন্ট
| নির্বাচক | উদাহরণ | উদাহরণের বর্ণনা |
| ::after | p::after | <p> এলিমেন্ট এর উপাদান এর পরে কিছু যোগ করার জন্য |
| ::before | p::before | <p> এলিমেন্ট এর উপাদান এর পূর্বে কিছু যোগ করার জন্য |
| ::first-letter | p::first-letter | সকল <p> এলিমেন্ট এর প্রথম অক্ষর নির্বাচন করার জন্য |
| ::first-line | p::first-line | সকল <p> এলিমেন্ট এর প্রথম লাইন নির্বাচন করার জন্য |
| ::selection | p::selection | ব্যবহারকারী দ্বারা কোন এলিমেন্ট এর উপাদান এর অংশবিশেষ নির্বাচন করার জন্য |
সকল সিএসএস Pseudo Classes
| নির্বাচক | উদাহরণ | উদাহরণের বর্ণনা |
| :active | a:active | সক্রিয় লিঙ্ক নির্বাচন |
| :checked | input:checked | প্রতিটি ক্লিক করা <input> এলিমেন্ট নির্বাচন |
| :disabled | input:disabled | প্রতিটি নিষ্ক্রিয় <input> এলিমেন্ট নির্বাচন |
| :empty | p:empty | প্রতিটি <p> এলিমেন্ট নির্বাচন যার অভ্যন্তরে অন্য কোন এলিমেন্ট নেই। |
| :enabled | input:enabled | প্রতিটি সক্রিয় <input> এলিমেন্ট নির্বাচন। |
| :first-child | p:first-child | প্রতিটি <p> এলিমেন্ট নির্বাচন যা অন্যকোন এলিমেন্ট এর ভিতরের শেষ এলিমেন্ট |
| :first-of-type | p:first-of-type | প্রতিটি <p> এলিমেন্ট নির্বাচন যা অন্য এলিমেন্ট এর ভিতরে প্রথম <p> এলিমেন্ট |
| :focus | input:focus | <input> এলিমেন্ট নির্বাচন যার ফোকাস আছে |
| :hover | a:hover | কোন লিঙ্ক এর উপরে মাউস পয়েন্টার রাখলে উক্ত লিঙ্ক নির্বাচন |
| :in-range | input:in-range | নির্দিষ্ট সীমার মধ্যের মান বিশিষ্ট <input> এলিমেন্ট নির্বাচন |
| :invalid | input:invalid | সকল <input> এলিমেন্ট নির্বাচন যাদের ভুল মুল্য আছে |
| :lang(language) | p:lang(it) | প্রতিটি <p> এলিমেন্ট নির্বাচন যাদের "it" দিয়ে শুরু একটি Lang অ্যাট্রিবিউট মান আছে |
| :last-child | p:last-child | কোন এলিমেন্ট এর অধীন সকল <p> এলিমেন্ট নির্বাচন যা উক্ত এলিমেন্ট এর শেষ এলিমেন্ট |
| :last-of-type | p:last-of-type | কোন এলিমেন্ট এর অধীন সকল <p> এলিমেন্ট নির্বাচন যা উক্ত এলিমেন্ট এর শেষ এলিমেন্ট |
| :link | a:link | সব অদেখা লিঙ্ক নির্বাচন |
| :not(selector) | :not(p) | <p> এলিমেন্ট নয় এমন সকল এলিমেন্ট নির্বাচন |
| :nth-child(n) | p:nth-child(2) | কোন এলিমেন্ট এর অধীন সকল <p> এলিমেন্ট নির্বাচন যা উক্ত এলিমেন্ট এর দ্বিতীয় এলিমেন্ট |
| :nth-last-child(n) | p:nth-last-child(2) | কোন এলিমেন্ট এর অধীন সকল <p> এলিমেন্ট নির্বাচন যা উক্ত এলিমেন্ট এর দ্বীতিয় শেষের দিক হতে দ্বিতীয় এলিমেন্ট |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | কোন এলিমেন্ট এর অধীন সকল <p> এলিমেন্ট নির্বাচন যা উক্ত এলিমেন্ট এর শেষের দিক হতে দ্বিতীয় এলিমেন্ট |
| :nth-of-type(n) | p:nth-of-type(2) | কোন এলিমেন্ট এর অধীন সকল <p> এলিমেন্ট নির্বাচন যা উক্ত এলিমেন্ট এর দ্বিতীয় <p> এলিমেন্ট |
| :only-of-type | p:only-of-type | কোন এলিমেন্ট এর অধীন সকল <p> এলিমেন্ট নির্বাচন যা উক্ত এলিমেন্ট এর একমাত্র <p> এলিমেন্ট |
| :only-child | p:only-child | কোন এলিমেন্ট এর অধীন সকল <p> এলিমেন্ট নির্বাচন যা উক্ত এলিমেন্ট এর একমাত্র এলিমেন্ট |
| :optional | input:optional | "required" এট্রিবিউট বিশিষ্ট <input> এলিমেন্ট নির্বাচন |
| :out-of-range | input:out-of-range | নির্দিষ্ট মান এর বাহিরের মান বিশিষ্ট <input> এলিমেন্ট নির্বাচন |
| :read-only | input:read-only | "readonly" এট্রিবিউট নির্দিষ্ট করা <input> এলিমেন্ট নির্বাচন |
| :read-write | input:read-write | "readonly" এট্রিবিউট ব্যতীত <input> এলিমেন্ট নির্বাচন। |
| :required | input:required | "required" এট্রিবিউট নির্দিষ্ট করা <input> এলিমেন্ট নির্বাচন |
| :root | root | ডকুমেন্ট এর root element নির্বাচন |
| :target | #news:target | বর্তমানে সক্রিয় #news এলিমেন্ট নির্বাচন (clicked on a URL containing that anchor name) |
| :valid | input:valid | সঠিক মান বিশিষ্ট সকল <input> এলিমেন্ট নির্বাচন |
| :visited | a:visited | সকল দেখা লিঙ্ক নির্বাচন |
.jpg?w=474)
