সিউডো ক্লাস – ফ্রি HTML ও CSS কোর্স – ক্লাস ১০

HTML pseudo-classes প্রদান করে, সেই ক্লাসগুলি যেগুলি ডিফল্টরূপে সংজ্ঞায়িত হয় এবং আমাদের যে কোনও একটিতে একটি স্টাইল প্রয়োগ করার অনুমতি দেয়:

  • একটি উপাদান যা একটি নির্দিষ্ট অবস্থায় রয়েছে।
  • শ্রেণিবিন্যাস দ্বারা উপাদানগুলির একটি নির্দিষ্ট সেট

আমরা এই পেজে প্রাক্তনদের নিয়ে আলোচনা করব এবং প্রতিটি pseudo-classes এর জন্য উদাহরণ দেব। মনে রাখবেন যে সিএসএসে সিউডো-ক্লাসগুলি ইনলাইনে অন্তর্ভুক্ত করার কোনও উপায় নেই।

লিঙ্কস

একটি লিঙ্ক হয় unvisited অবস্থায় বা visite করা অবস্থায় থাকতে পারে। একটি unvisited লিঙ্কটি এমন লিঙ্ক যা ক্লিক করা হয়নি। একটি visited লিঙ্কটি এমন লিঙ্ক যা ক্লিক করা হয়েছিল।

<style>
a.special:link {
    color: green;
}

a.special:visited {
    color: red;
}
</style>

<p><a href="#">This is a standard link, it will become purple when clicked</a></p>
<p><a class="special" href="#">This is a special colored link and become red when clicked</a></p>

হুভার

css:hover সিউডো-ক্লাসটি এইচটিএমএল উপাদানগুলির জন্য স্টাইলের সংজ্ঞা দিতে ব্যবহার করা যেতে পারে যেখানে ব্যবহারকারীরা মাউস ব্যবহার করে ঘুরে বেড়াচ্ছে।

<style>
p:hover {
    background-color: yellow;
}
</style>
<p>Paragraphs now have a yellow background when hovering over them.</p>

একটিভ এবং টারগেট

css:active সিউডো-ক্লাস এমন উপাদানগুলিতে স্টাইল প্রোয়োগ করে যেটাতে বর্তমানে ক্লিক করা হচ্ছে।

<style>
a:active {
    font-weight: bold;    
}
</style>
<p>
    <a href="#first">First Section</a>
    <a href="#second">Second Section</a>
    <a href="#third">Third Section</a>
</p>

css:target লিঙ্ক এ ক্লিক করলে আমাদের গন্তব্য উপাদানকে স্টাইল করতে দেয়।

<style>
p:target {
    font-weight: bold;    
}
</style>
<p>
    <a href="#first">First Section</a>
    <a href="#second">Second Section</a>
    <a href="#third">Third Section</a>
</p>
<p id="first">This is the text of the first section.</p>
<p id="second">This is the text of the second section.</p>
<p id="third">This is the text of the third section.</p>

ফোকাস

css:focus সিউডো-ক্লাস ফোকাসযুক্ত কোন উপাদানটির জন্য স্টাইলগুলি ব্যবহার করতে দেয়।

<style>
input:focus {
    font-weight: bold;    
}
</style>
<form>
    <p><input type="text" value="First field"></p>
    <p><input type="text" value="Second field"></p>
    <p><input type="text" value="Third field"></p>        
</form>

Leave a Comment