সিএসএস Pseudo-classes

Pseudo-classes কি ???

Pseudo-classes ব্যবহার করা হয় একটি উপাদান এর একটি বিশেষ state নির্ধারণ করতে ।

উদাহরণস্বরূপ এটি ব্যবহার করা হয়ঃ

• যখন user এর উপর মাউস নিয়ে নাড়াচাড়া করে তখন ভিন্ন Style প্রদর্শন করে ।
• visited লিঙ্ক এবং unvisited লিঙ্ক ভিন্ন ভিন্ন Style প্রদর্শন করে।

Syntax বা শব্দবিন্যাস

pseudo-classes এর শব্দবিন্যাসঃ

selector:pseudo-class {
        property:value;
 }

Anchor Pseudo-classes

লিংক বিভিন্ন উপায়ে প্রদর্শিত হতে পারে:

উদাহরনঃ

/* unvisited link */
a:link {
    color: #FF0000;
}

/* visited link */
a:visited {
    color: #00FF00;
}

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

/* selected link */
a:active {
    color: #0000FF;
}

Note: a:link এর পরে অবশ্যই a:hover আসবে এবং a:visited আসে যাতে সিএসএস সংজ্ঞা কার্যকর করা হয় !!

CSS definition অনুযায়ী a:hover এর পরে সব সময় a:active আসবে যা গুরুত্বপূর্ণ অর্থ বহন করে ।

Pseudo-class নাম সংবেদনশীল নয় ।

Pseudo-classes এবং CSS Classes

Pseudo-classes , CSS classes এর সাথেও যুক্ত হতে পারেঃ

উদাহরনঃ

a.highlight:hover {
       color: #ff0000;
 }

উদাহরণস্বরূপ আপনি যখন লিঙ্ক এর উপর কার্সার রাখবেন, এর রং পরিবর্তন হবে

CSS – The :first-child Pseudo-class

the :first-child pseudo-class সেই সব উপাদানের সাথে মিলিত হয় যা অন্য উপাদানের first child

Note: প্রথমে :first-child IE8 এ কাজ করলেও পরবর্তীতে সেটা < !DOCTYPE> এ ঘোষণা করা হয়

Match the first <p> element

নিম্নলিখিত উদাহরণে, Selector যে কোনো উপাদান সাথে মেলে যেটা কিনা কোন <p> উপাদান এর First-child :

উদাহরনঃ

p:first-child {
      color: blue;
 }

Match the first <i> element in all <p>elements

নিম্নলিখিত উদাহরণে, selector সমস্ত <p> উপাদান এর প্রথম প্রথম উপাদানের সাথে মিলিত হয়

উদাহরনঃ

p:first-child i {
       color: blue;
 }

CSS – The :lang Pseudo-class

The : Lang pseudo-class আপনাকে বিভিন্ন ভাষার জন্য বিশেষ নিয়ম নির্ধারণ করতে সাহায্য করবে

Note: IE8 , :lang pseudo-class কে তখনই সাপোর্ট করবে যখন এটি < !DOCTYPE> হবে

নীচের উদাহরণে,: Lang ক্লাস = “না” lang এর সঙ্গে<p>উপাদানের জন্য উদ্ধৃতি চিহ্ন সংজ্ঞায়িত করে:

উদাহরনঃ

p i:first-child {
    color: blue;
}