সিএসএস সিউডো ক্লাসগুলি হল বিভিন্ন উপাদানের বিশেষ অবস্থার প্রতিনিধিত্ব, এই ক্লাসগুলি শুধুমাত্র নথিতে মৌলিক উপাদানগুলিকে চিত্রিত করে না বরং তাদের বাহ্যিক কারণগুলি যেমন স্থিতি, অবস্থান, ইতিহাস ইত্যাদিও। CSS নির্বাচক।
সিনট্যাক্স
একটি উপাদান −
-এ CSS সিউডো ক্লাস ব্যবহার করার সিনট্যাক্স নিচে দেওয়া হলSelector:pseudo-class {
css-property: /*value*/;
} উদাহরণ
CSS সিউডো ক্লাস -
ব্যবহার করার জন্য একটি উদাহরণ দেখা যাক<!DOCTYPE html>
<html>
<head>
<title>CSS Pseudo Class</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input:valid {
color: #fefefe;
background-color: #4CAF50;
}
input:invalid {
color: #fefefe;
background-color: #DC3545;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS Pseudo Class</legend>
<label for="EmailSelect">Email :
<input type="email" id="EmailSelect" size="25" required>
</label><br>
<label for="PassSelect">Password :
<input type="password" id="PassSelect" minlength="8" required>
</label>
<div id="divDisplay">Min. Strength of Password: 8<br>Both Fields are Required</div>
</fieldset>
</form>
</body>
</html> আউটপুট
এটি নিম্নলিখিত আউটপুট −
তৈরি করবেযখন ফর্ম ফিল্ডে অবৈধ ডেটা থাকে −
যখন ফর্ম ফিল্ডে বৈধ ডেটা থাকে −
উদাহরণ
আসুন CSS সিউডো ক্লাসের আরেকটি উদাহরণ দেখি -
<!DOCTYPE html>
<html>
<head>
<title>CSS Pseudo Class</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
a {
text-decoration: none;
background:grey;
color: white;
border-radius: 3px;
padding: 6px;
}
input[type="button"] {
border-radius: 10px;
}
:target {
border:4px solid black;
margin: 0 auto;
height: 200px;
width: 200px;
background-image: url('https://www.tutorialspoint.com/arangodb/images/arangodb-mini-logo.jpg');
}
#circle {
border-radius: 50%;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS Pseudo Class</legend>
<div>
<div id="circle"></div>
<div id="square"></div>
</div>
<div>
<a href="#square">Tile</a>
<a href="#circle">Avatar</a>
</div>
</fieldset>
</form>
</body>
</html> আউটপুট
এটি নিম্নলিখিত আউটপুট −
তৈরি করবেযেকোনো বোতামে ক্লিক করার আগে −
'টাইল' ক্লিক করার পর বোতাম -
'অবতার' ক্লিক করার পরে৷ বোতাম -
