আমরা CSS সিউডো ক্লাস ব্যবহার করে HTML-এ বিদ্যমান উপাদানগুলিতে নির্দিষ্ট শৈলী যোগ করতে পারি যা একটি নির্দিষ্ট অবস্থার সাথে একটি উপাদান নির্বাচন করে যেমন (হোভার, পরিদর্শন করা, অক্ষম, ইত্যাদি)
দ্রষ্টব্য − সিএসএস সিউডো ক্লাসকে সিউডো এলিমেন্ট থেকে আলাদা করতে, CSS3-তে, সিউডো ক্লাস একক-কোলন নোটেশন ব্যবহার করে।
সিনট্যাক্স
−
এলিমেন্টে CSS সিউডো ক্লাস ব্যবহার করার জন্য সিনট্যাক্স নিচে দেওয়া হলSelector:pseudo-class {
css-property: /*value*/;
} নিম্নলিখিত সমস্ত উপলব্ধ CSS সিউডো ক্লাস -
| Sr.No | ছদ্ম-শ্রেণী এবং বর্ণনা |
|---|---|
| 1 | সক্রিয় এটি সক্রিয় উল্লিখিত উপাদান নির্বাচন করে |
| 2 | চেক করা হয়েছে৷ এটি প্রতিটি চেক করা উল্লিখিত উপাদান নির্বাচন করে |
| 3 | অক্ষম৷ এটি প্রতিটি অক্ষম উল্লিখিত উপাদান নির্বাচন করে |
| 4 | খালি৷ এটি প্রতিটি উল্লিখিত উপাদান নির্বাচন করে যার কোন সন্তান নেই |
| 5 | সক্ষম৷ এটি প্রতিটি সক্রিয় উল্লিখিত উপাদান নির্বাচন করে |
| 6 | প্রথম সন্তান এটি প্রতিটি উল্লিখিত উপাদান নির্বাচন করে যা তার পিতামাতার প্রথম সন্তান |
| 7 | প্রথম ধরনের এটি প্রতিটি উপাদান নির্বাচন করে যা তার পিতামাতার প্রথম উল্লিখিত উপাদান |
| 8 | ফোকাস এটি উল্লিখিত উপাদান নির্বাচন করে যার ফোকাস আছে |
| 9 | হোভার করুন এটি মাউস ওভারে উল্লেখিত উপাদান নির্বাচন করে |
| 10 | পরিসীমার মধ্যে এটি একটি নির্দিষ্ট পরিসরের মধ্যে একটি মান সহ উল্লিখিত উপাদান নির্বাচন করে |
| 11 | অবৈধ৷ এটি একটি অবৈধ মান সহ উল্লিখিত সমস্ত উপাদান নির্বাচন করে |
| 12 | lang(ভাষা) এটি "ভাষা" থেকে শুরু করে একটি ল্যাং অ্যাট্রিবিউট মান সহ প্রতিটি উল্লিখিত উপাদান নির্বাচন করে |
| 13 | শেষ-সন্তান এটি প্রতিটি উল্লিখিত উপাদান নির্বাচন করে যা তার পিতামাতার শেষ সন্তান |
| 14 | শেষ-টাইপ এটি প্রতিটি উপাদান নির্বাচন করে যা তার পিতামাতার সর্বশেষ উল্লিখিত উপাদান |
| 15 | লিঙ্ক এটি সমস্ত অপ্রদর্শিত উল্লিখিত উপাদান নির্বাচন করে |
| 16 | নয়(নির্বাচক) এটি উল্লিখিত উপাদান নয় এমন প্রতিটি উপাদান নির্বাচন করে |
| 17 | নম-শিশু(n) এটি প্রতিটি উল্লিখিত উপাদান নির্বাচন করে যা তার পিতামাতার nম সন্তান |
| 18 | nth-last-child(n) এটি প্রতিটি উল্লিখিত উপাদান নির্বাচন করে যা তার পিতামাতার নবম সন্তান, শেষ সন্তান থেকে গণনা করে |
| 19 | nth-last-oftype(n) এটি প্রতিটি উল্লিখিত উপাদান নির্বাচন করে যা তার পিতামাতার nম উল্লিখিত উপাদান, শেষ সন্তান থেকে গণনা করে |
| 20 | নম-অফ-টাইপ(n) এটি প্রতিটি উল্লিখিত উপাদান নির্বাচন করে যা তার পিতামাতার nম উল্লিখিত উপাদান |
| 21 | কেবল-অফ-টাইপ এটি প্রতিটি উল্লিখিত উপাদান নির্বাচন করে যা তার পিতামাতার একমাত্র উল্লিখিত উপাদান |
| 22 | শুধু-সন্তান এটি প্রতিটি উল্লিখিত উপাদান নির্বাচন করে যা তার পিতামাতার একমাত্র সন্তান |
| 23 | ঐচ্ছিক এটি কোন "প্রয়োজনীয়" বৈশিষ্ট্য ছাড়াই উল্লেখিত উপাদান নির্বাচন করে |
| 24 | সীমার বাইরে এটি একটি নির্দিষ্ট সীমার বাইরে একটি মান সহ উল্লিখিত উপাদান নির্বাচন করে |
| 25 | শুধু পড়ার জন্য এটি নির্দিষ্ট একটি "পাঠযোগ্য" বৈশিষ্ট্য সহ উল্লেখিত উপাদান নির্বাচন করে |
| 26 | পড়ুন-লিখুন এটি কোন "পাঠযোগ্য" বৈশিষ্ট্য ছাড়াই উল্লেখিত উপাদান নির্বাচন করে |
| 27 | প্রয়োজনীয় এটি উল্লিখিত উপাদানগুলিকে নির্দিষ্ট একটি "প্রয়োজনীয়" বৈশিষ্ট্য সহ নির্বাচন করে |
| 28 | মূল এটি নথির মূল উপাদান নির্বাচন করে |
| 29 | লক্ষ্য এটি বর্তমান সক্রিয় উল্লিখিত উপাদান নির্বাচন করে (সেই অ্যাঙ্কর নাম ধারণকারী একটি URL এ ক্লিক করা হয়েছে) |
| 30 | বৈধ এটি একটি বৈধ মান সহ উল্লিখিত সমস্ত উপাদান নির্বাচন করে |
| 31 | পরিদর্শন করেছেন৷ এটি সব পরিদর্শন উল্লিখিত উপাদান নির্বাচন করে |
উদাহরণ
আসুন CSS Pseudo Class -
এর একটি উদাহরণ দেখি<!DOCTYPE html>
<html>
<head>
<title>CSS Anchor Pseudo Classes</title>
</head>
<style>
div {
color: #000;
padding:20px;
background-image: linear-gradient(135deg, grey 0%, white 100%);
text-align: center;
}
.anchor {
color: #FF8A00;
}
.anchor:last-child {
color: #03A9F4;
}
.anchor:visited {
color: #FEDC11;
}
.anchor:hover {
color: #C303C3;
}
.anchor:active {
color: #4CAF50;
}
</style>
<body>
<div>
<h1>Search Engines</h1>
<a class="anchor" href="https://www.google.com" target="_blank">Go To Google</a>
<a class="anchor" href="https://www.bing.com" target="_blank">Go To Bing</a>
</div>
</body>
</html> আউটপুট
এটি নিম্নলিখিত আউটপুট −
তৈরি করবে
উদাহরণ
CSS Pseudo Class -
-এর আরেকটি উদাহরণ দেখা যাক<!DOCTYPE html>
<html>
<head>
<title>CSS Pseudo Classes</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
box-sizing: border-box;
}
.child{
display: inline-block;
height: 40px;
width: 40px;
color: white;
border: 4px solid black;
}
.child:nth-of-type(1){
background-color: #FF8A00;
}
.child:nth-of-type(2){
background-color: #F44336;
}
.child:nth-of-type(3){
background-color: #C303C3;
}
.child:nth-of-type(4){
background-color: #4CAF50;
}
.child:nth-of-type(5){
background-color: #03A9F4;
}
.child:nth-of-type(6){
background-color: #FEDC11;
}
.child:hover{
background-color: #000;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Pseudo-Classes</legend>
<div id="container">
<div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div>
</div><br>
</body>
</html> আউটপুট
এটি নিম্নলিখিত আউটপুট −
তৈরি করবেযখন div উপাদান −
-এর উপর ঘোরাফেরা করা হয় না
যখন div উপাদানের উপর ঘোরানো হয় -
