X

X

X

CSS Pseudo-classes (ছদ্মবেশি ক্লাস)


Pseudo-classes (ছদ্মবেশি ক্লাস) কি?

কোনো ইলামেন্টের বিশেষ কিছু অবস্থা বোঝানোর জন্য এই ক্লাসগুলোকে ব্যবহার করা হয়।

উদাহরণস্বরূপ এটি নিম্নোক্ত কাজের ক্ষেত্রে ব্যবহৃত হতে পারে:

  • ইলামেন্টের উপর মাউস হোভার করার সময় তাতে স্টাইল যুক্তকরণে।
  • visited ও unvisited link -কে আলাদাভাবে স্টাইল করণে।
  • ইলামেন্ট যখন ফোকাস হয়, তখন তাতে স্টাইল যুক্তকরণে।
আমার উপরে মাউস রেখে দেখুন কি হয়।


Syntax

pseudo-class লিখার পদ্ধতি নিম্নরূপ:

selector:pseudo-class {
      property:value;
}

Anchor Pseudo-class

কোনো লিংকে বিভিন্নভাবে উপস্থাপণ করা যায়। যেমন:

Code Example

<style>
/* unvisited link */
a:link {
    color: red;
}

/* visited link */
a:visited {
    color: green;
}

/* mouse over link */
a:hover {
    color: hotpink;
}

/* selected link */
a:active {
    color: blue;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

বি:দ্র: a:hover কে অবশ্যই a:link এবং a:visited এর পরে লিখতে হবে। a:active কে a:hover পরে লিখতে হবে। নইলে প্রযুক্ত স্টাইল কার্যকরী হবে না। মনে রাখবেন Pseudo-class সমূহ কেস-সেনসিটিভ নয়। অর্থাৎ, আপনি এদেরকে ছোটো বা বড় হাতে যেকোনো অক্ষরে লিখতে পারবেন।


Pseudo-class এবং CSS Class সমূহ

এই দুই ধরণের ক্লাসকে একসাথে লিখা যায়। অর্থাৎ, এদেরকে কমবাইন করে একইসাথে ব্যবহার করা যায়:

নিচের উদাহরণটি লক্ষ্য করুণ:

Code Example

<style>
a.highlight:hover {
    color: #ff0000;
} 
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


<div> এর উপর মাউস Hover

<div> element এর ক্ষেত্রে :hover pseudo-class এর ব্যবহার দেখানো হলো :

Code Example

<style>
div {
    background-color: green;
    color: white;
    padding: 25px;
    text-align: center;
}
div:hover {
    background-color: blue;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Simple Tooltip Hover

<div> element এর উপরে মাউস হোভার করুন। তাহলে a <p> element টিকে টুলটিপের মত দেখতে পারবেন।:

<p> element কে দেখার জন্য আমার উপরে মাউস হোভার করুন

এইযে! আমি এখানে!!!! হা হা হা!!!!

Code Example

<style>
p {
    display: none;
    background-color: yellow;
    padding: 20px;
}

div:hover p {
    display: block;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


CSS – :first-child Pseudo-class

:first-child pseudo-class দিয়ে কোনো ইলামেন্টের প্রথম চাইল্ড ইলামেন্টকে সিলেক্ট করা হয়।

প্রথম <p> element কে বাছাই

নিচের উদাহরণে সব <p> element কে সিলেক্ট করা হয়েছে, যেগুলো অন্য কোনো ইলামেন্টের প্রথম চাইল্ড বা সন্তান।

Code Example

<style>
p:first-child {
    color: blue;
} 
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


সব <p> এর প্রথম <i> element ইলামেন্টকে বাছাই

নিচের উদাহরণটি দেখুন:

Code Example

<style>
p i:first-child {
    color: blue;
} 
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


কোনো ইলামেন্টের প্রথম <p> এর প্রথম <i> element কে বাছাই

Code Example

<style>
p:first-child i {
    color: blue;
} 
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


CSS – :lang Pseudo-class

:lang pseudo-class দিয়ে বিভিন্ন ভাষার জন্য বিভিন্ন রুল সেট করা হয়।

নিচের উদাহরণে lang=”no” ব্যবহার করে <q> ইলামেন্টের জন্য কোটোশন মার্ক সেট করা হলো:

Code Example

<style>
q:lang(no) {
    quotes: "~" "~";
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


আরও কিছু উদাহরণ

Add different styles to hyperlinks
This example demonstrates how to add other styles to hyperlinks.

Use of :focus
This example demonstrates how to use the :focus pseudo-class.


নিজে নিজে চেষ্টা করুন!

Exercise 1 »  Exercise 2 »  Exercise 3 »  Exercise 4 »


CSS Pseudo Class সমূহ

Selector উদাহরণ বর্ণনা
:active a:active active link সিলেক্ট করার জন্য ব্যবহৃত হয়।
:checked input:checked checked <input> element সিলেক্ট করার জন্য ব্যবহৃত হয়।
:disabled input:disabled disabled <input> element সিলেক্ট করার জন্য ব্যবহৃত হয়।
:empty p:empty যে <p> element এর children নাই তাদেরকে সিলেক্ট করার জন্য ব্যবহৃত হয়।
:enabled input:enabled enabled <input> element সিলেক্ট করার জন্য ব্যবহৃত হয়।
:first-child p:first-child যেসব <p> element তাদের প্যারেন্ট ইলামেন্টের প্রথম চাইল্ড তাদেরকে সিলেক্ট করার জন্য ব্যবহৃত হয়।
:first-of-type p:first-of-type যে সব <p> element তাদের প্যারেন্টের প্রথম ইলামেন্ট সিলেক্ট করার জন্য ব্যবহৃত হয়।
:focus input:focus ফোকাস <input> element কে সিলেক্ট করার জন্য ব্যবহৃত হয়।
:hover a:hover mouse over করা লিংককে সিলেক্ট করার জন্য ব্যবহৃত হয়।
:in-range input:in-range কোনো একটি নির্দিষ্ট রেঞ্জ বিশিষ্ট <input> element সিলেক্ট করার জন্য ব্যবহৃত হয়।
:invalid input:invalid invalid value বিশিষ্ট <input> element কে সিলেক্ট করার জন্য ব্যবহৃত হয়।
:lang(language) p:lang(it) lang attribute বিশিষ্ট সেসব <p> element যাদের মান “it” দিয়ে শুরু তাদেরকে সিলেক্ট করার জন্য ব্যবহৃত হয়।
:last-child p:last-child কোনো ইলামেন্টের সর্বশেষ <p> element কে সিলেক্ট করার জন্য ব্যবহৃত হয়।
:last-of-type p:last-of-type Selects every <p> element that is the last <p> element of its parent
:link a:link সব unvisited link কে সিলেক্ট করার জন্য ব্যবহৃত হয়।
:not(selector) :not(p) <p> element বাদে বাকি সব ইলামেন্টকে সিলেক্ট করার জন্য ব্যবহৃত হয়।
:nth-child(n) p:nth-child(2) কোনো ইলামেন্টের সব দ্বিতীয় <p> element কে সিলেক্ট করার জন্য ব্যবহৃত হয়।
:nth-last-child(n) p:nth-last-child(2) Selects every <p> element that is the second child of its parent, counting from the last child
:nth-last-of-type(n) p:nth-last-of-type(2) Selects every <p> element that is the second <p> element of its parent, counting from the last child
:nth-of-type(n) p:nth-of-type(2) Selects every <p> element that is the second <p> element of its parent
:only-of-type p:only-of-type Selects every <p> element that is the only <p> element of its parent
:only-child p:only-child Selects every <p> element that is the only child of its parent
:optional input:optional Selects <input> elements with no “required” attribute
:out-of-range input:out-of-range Selects <input> elements with a value outside a specified range
:read-only input:read-only Selects <input> elements with a “readonly” attribute specified
:read-write input:read-write Selects <input> elements with no “readonly” attribute
:required input:required Selects <input> elements with a “required” attribute specified
:root root Selects the document’s root element
:target #news:target Selects the current active #news element (clicked on a URL containing that anchor name)
:valid input:valid Selects all <input> elements with a valid value
:visited a:visited Selects all visited links

CSS Pseudo Element সমূহ

Selector উদাহরণ বর্ণনা
::after p::after Insert content after every <p> element
::before p::before Insert content before every <p> element
::first-letter p::first-letter Selects the first letter of every <p> element
::first-line p::first-line Selects the first line of every <p> element
::selection p::selection Selects the portion of an element that is selected by a user