সিএসএস সিডো-ক্লাস - Css Pseudo Class



কিছু সিলেক্টরে special effect যুক্ত করার জন্য সিএসএস সিডো ক্লাস ব্যবহার করা হয়।


সিনট্যাক্স

সিডো ক্লাস এর সিনট্যাক্স হল নিম্নরূপ -

কোড দেখুন

selector:pseudo-class {property:value;}


সিডো ক্লাস এর সাথে সিএসএস ক্লাসও ব্যবহার করা যায়। সিডো ক্লাস এর সাথে সিএসএস ক্লাস ব্যবহার করার সিনট্যাক্স হল নিম্নরূপ -

কোড দেখুন

selector.class:pseudo-class {property:value;}




অ্যাংকর সিডো ক্লাস

একটি হাইপারলিংককে নানা ভাবে স্টাইলিং করা যায়। নীচে একটি উদাহরণ দেখুন -

কোড দেখুন

a:link {color:#FF0000;}       /* unvisited link */
a:visited {color:#00FF00;}       /* visited link */
a:hover {color:#FF00FF;}       /* mouse over link */
a:active {color:#0000FF;}       /* selected link */


নোট - সিএসএস সিডো ক্লাস case sensetive নয়।


সিডো ক্লাস এবং সিএসএস ক্লাস

সিএসএস ক্লাস এবং সিডো ক্লাস একসাথে ব্যবহার করা যেতে পারে। নীচে একটি উদাহরণ দেখুন -

এইচটিএমএল কোড দেখুন

<a class="red" href="https://www.websschool.com/">
websschool.com
</a>



সিএসএস কোড দেখুন

a.red:hover {color:#0000ff;}


ওপরের উদাহরণে যদি হাইপারলিংকটির ওপর মাউস পয়েন্টার নিয়ে আসা হয় তবে লিংকটির রং পরিবর্তন হবে।


:first-child সিডো ক্লাস

কোন এলিমেন্টের first child কে অর্থাৎ প্রথম এলিমেন্টকে :first-child pseudo-class ব্যবহার করে ভিন্নভাবে স্টাইল করা যায়।

নোট - একটি !DOCTYPE উল্লেখ না করা পর্যন্ত IE8 এবং এর কাছের ভার্সনগুলো 'first-child pseudo-class' সমর্থন বা support করে না।

সিএসএস কোড দেখুন

<html>
<head>
<style type="text/css">
p:first-child{
color:green;
}
</style>
</head>
<body>
<h1> This is first heading. </h1>
<h1> This is secound heading. </h1>
</body>
</html>


ওপরের উদাহরণে ২টিই হেডিং কিন্তু first-child pseudo-class এর জন্য সিএসএস স্টাইল ১ম হেডিং এর জন্য প্রযোজ্য হয়েছে।


:lang

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

সিএসএস কোড দেখুন

<html>
<head>
<style type="text/css">
q:lang(no) {quotes: "~" "~";}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>


নোট - IE8 এ lang pseudo-class সমর্থন বা support করবে তখনই যখন একটি ডকটাইপ ডিক্লারেশন করা হয়।


সিএসএস এর সব Pseudo Classes/Element

সিলেক্টর উদাহরণ বর্ণনা
:link a:link সব unvisited হাইপারলিংক নির্দিষ্ট করে।
:visited a:visited সব visited হাইপারলিংক নির্দিষ্ট করে।
:active a:active সব হাইপারলিংকের active effect নির্দিষ্ট করে।
:hover a:hover সব হাইপারলিংকের জন্য hover effect নির্দিষ্ট করে।
:focus input:focus সেই সকল ইনপুট এলিমেন্ট নির্দিষ্ট করে যেগুলো focus এ রয়েছে।
:first-letter p:first-letter সমস্ত পারাগ্রাফ বা <p> এলিমেন্ট ১ম বর্ণ বা letter নির্দিষ্ট করে।
:first-line p:first-line সমস্ত পারাগ্রাফ বা <p> এলিমেন্ট ১ম লাইন নির্দিষ্ট করে।
:first-child p:first-child সে সমস্ত পারাগ্রাফ বা <p> এলিমেন্ট নির্দিষ্ট করে যেটা তার parant এর first child.
:before p:before সমস্ত পারাগ্রাফ বা <p> এলিমেন্ট পূর্বে কন্টেন্ট সংযুক্ত করে।
:after p:after সমস্ত পারাগ্রাফ বা <p> এলিমেন্ট পরে কন্টেন্ট সংযুক্ত করে।
:lang(language) p:lang(it) সেই সমস্ত পারাগ্রাফ বা <p> এলিমেন্ট নির্দিষ্ট করে যেটার সাথে একটি lang এট্রিবিউট আছে এবং যার মান শুরু হয়েছে" it " দিয়ে।







এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Copyright 2016-2018 by websschool.com, All Rights Reserved.