কম্পিউটার

সিএসএস-এ ছদ্ম-উপাদান কী?


একটি CSS ছদ্ম-উপাদান মূলত একটি উপাদানের নির্দিষ্ট অংশ যেমন প্রথম-অক্ষর, প্রথম-লাইন, ইত্যাদির জন্য একটি নির্বাচক।

সিনট্যাক্স

একটি উপাদান −

-এ CSS সিউডো উপাদান ব্যবহার করার জন্য সিনট্যাক্স নিচে দেওয়া হল
Selector::pseudo-element {
   css-property: /*value*/;
}

উদাহরণ

চলুন CSS Pseudo Elements -

-এর উদাহরণ দেখি
<!DOCTYPE html>
<html>
<head>
<style>
ol, ul {
   list-style: none;
   counter-reset: demo_var2;
}
ul {
   counter-reset: demo_var1;
}
ol > li::before {
   counter-increment: demo_var2;
   content: counter(demo_var2, lower-roman) ") ";
}
li::after {
   counter-increment: demo_var1;
   content: " " counter(demo_var1) ". ";
}
</style>
</head>
<body>
<ul>
<li>Demo Line</li>
<ol>
<li>demo line</li>
<li>demo line</li>
</ol>
<li>Demo Line</li>
<ol>
<li>demo line</li>
<li>demo line</li>
</ol>
<li>Demo Line</li>
</ul>
</body>
</html>

আউটপুট

এটি নিম্নলিখিত আউটপুট −

তৈরি করবে

সিএসএস-এ ছদ্ম-উপাদান কী?

উদাহরণ

চলুন CSS Pseudo Elements -

এর আরেকটি উদাহরণ দেখি
<!DOCTYPE html>
<html>
<head>
<style>
   ::-webkit-input-placeholder { /*Support for Edge */
   color: blue;
   font-style: italic;
}
:-ms-input-placeholder { /*Support for Internet Explorer */
   color: blue;
   font-style: italic;
}
::placeholder {
   color: blue;
   font-style: italic;
}
</style>
</head>
<body>
<h2> Sample Form </h2>
<textarea id="desc" name="desc" rows="5" cols="33" placeholder="Type here"></textarea>
<br />
<input type="text" name="author" placeholder="author name">
</body>
</html>

আউটপুট

এটি নিম্নলিখিত আউটপুট −

তৈরি করবে

সিএসএস-এ ছদ্ম-উপাদান কী?


  1. সিএসএস-এ সিউডো-ক্লাস কি?

  2. CSS এ বক্স মডেল কি?

  3. CSS-এ ::প্রথম-অক্ষরের ছদ্ম-উপাদান

  4. সিএসএস-এ সিউডো-ক্লাস এবং সিউডো-এলিমেন্টের মধ্যে পার্থক্য