একটি এলিমেন্টের একটি বিশেষ স্টেট নির্ধারণ করতে সিউডো-ক্লাস ব্যবহার করা হয়।
উদাহরণস্বরূপ, এটি ব্যবহার করা যায়:
সিউডো-ক্লাসের সিনট্যাক্স:
selector:pseudo-class {
property:value;
}লিঙ্ক বিভিন্নভাবে প্রদর্শিত হতে পারে:
/* না-দেখা লিঙ্ক */
a:link {
color: #FF0000;
}
/* দেখা লিঙ্ক */
a:visited {
color: #00FF00;
}
/* মাউস ওভার লিঙ্ক */
a:hover {
color: #FF00FF;
}
/* সিলেক্টেড লিঙ্ক */
a:active {
color: #0000FF;
}মনে রাখবেন: কার্যকর হতে a:hover-কে CSS ডেফিনিশনে অবশ্যই a:link এবং a:visited-এর পরে আসতে হবে! কার্যকর হতে a:active-কে CSS ডেফিনিশনে অবশ্যই a:hover-এর পরে আসতে হবে! সিউডো-ক্লাসের নাম কেস-সেনসিটিভ নয়।
সিউডো-ক্লাস CSS ক্লাসের সাথে একত্রে ব্যবহার করা যায়:
উদাহরণের লিঙ্কের উপর হোভার করলে, এর রঙ পরিবর্তিত হবে:
a.highlight:hover {
color: #ff0000;
}একটি <div> এলিমেন্টে :hover সিউডো-ক্লাস ব্যবহারের একটি উদাহরণ:
div:hover {
background-color: blue;
}একটি <p> এলিমেন্ট দেখাতে (টুলটিপের মতো) একটি <div> এলিমেন্টের উপর হোভার করুন:
<p> এলিমেন্ট দেখতে আমার উপর হোভার করুন।তাদা! আমি এখানে!
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}:first-child সিউডো-ক্লাস এমন একটি নির্দিষ্ট এলিমেন্টের সাথে মেলে, যা অন্য একটি এলিমেন্টের প্রথম চাইল্ড।
নিচের উদাহরণে, সিলেক্টরটি যেকোনো এলিমেন্টের প্রথম চাইল্ড এমন যেকোনো <p> এলিমেন্টের সাথে মেলে:
p:first-child {
color: blue;
}নিচের উদাহরণে, সিলেক্টরটি সব <p> এলিমেন্টের প্রথম <i> এলিমেন্টের সাথে মেলে:
p i:first-child {
color: blue;
}নিচের উদাহরণে, সিলেক্টরটি অন্য একটি এলিমেন্টের প্রথম চাইল্ড এমন <p> এলিমেন্টগুলোর সব <i> এলিমেন্টের সাথে মেলে:
p:first-child i {
color: blue;
}:lang সিউডো-ক্লাস আপনাকে বিভিন্ন ভাষার জন্য বিশেষ নিয়ম নির্ধারণ করতে দেয়।
নিচের উদাহরণে, :lang lang="no" থাকা <q> এলিমেন্টের জন্য উদ্ধৃতি চিহ্ন নির্ধারণ করে:
<html>
<head>
<style>
q:lang(no) {
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>| সিলেক্টর | উদাহরণ | উদাহরণের বিবরণ |
|---|---|---|
| :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) | "it" দিয়ে শুরু হওয়া lang অ্যাট্রিবিউট মানসহ প্রতিটি <p> এলিমেন্ট সিলেক্ট করে |
| :last-child | p:last-child | প্রতিটি <p> এলিমেন্ট সিলেক্ট করে যা তার প্যারেন্টের সর্বশেষ চাইল্ড |
| :last-of-type | p:last-of-type | প্রতিটি <p> এলিমেন্ট সিলেক্ট করে যা তার প্যারেন্টের সর্বশেষ <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> এলিমেন্ট সিলেক্ট করে যা সর্বশেষ চাইল্ড থেকে গণনা করে তার প্যারেন্টের দ্বিতীয় <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> এলিমেন্ট সিলেক্ট করে যা তার প্যারেন্টের একমাত্র <p> এলিমেন্ট |
| :optional | input:optional | প্রতিটি <p> এলিমেন্ট সিলেক্ট করে যা তার প্যারেন্টের একমাত্র চাইল্ড |
| :out-of-range | input:out-of-range | "required" অ্যাট্রিবিউট নেই এমন <input> এলিমেন্ট সিলেক্ট করে |
| :read-only | input:read-only | "readonly" অ্যাট্রিবিউট নির্ধারিত থাকা <input> এলিমেন্ট সিলেক্ট করে |
| :read-write | input:read-write | "readonly" অ্যাট্রিবিউট নেই এমন <input> এলিমেন্ট সিলেক্ট করে |
| :required | input:required | "required" অ্যাট্রিবিউট নির্ধারিত থাকা <input> এলিমেন্ট সিলেক্ট করে |
| :root | root | ডকুমেন্টের রুট এলিমেন্ট সিলেক্ট করে |
| :target | #news:target | বর্তমান সক্রিয় #news এলিমেন্ট সিলেক্ট করে (সেই অ্যাঙ্কর নামসহ একটি URL-এ ক্লিক করা হলে) |
| :valid | input:valid | বৈধ মানসহ সব <input> এলিমেন্ট সিলেক্ট করে |
| :visited | a:visited | সব দেখা লিঙ্ক সিলেক্ট করে |